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PREFÁCIO 


No desenvolvimento de aplicações web e mobile, há disponível 
uma quantidade expressiva de linguagens, frameworks e 
ferramentas. Nessa imensidão, é comum o desenvolvedor iniciante 
ficar perdido e até inseguro sobre qual o melhor caminho para a 
construção neste segmento. 


Para o desenvolvedor front-end, a tarefa é mais complicada, 
alinhada ao que ele exatamente precisa, seja um formulário, uma 
SPA (Single Page Application), apenas para citar alguns. 


O Angular (https://angular.io/docs) é uma plataforma que 
facilita a construção de aplicativos, combinando templates, injeção 
de dependências, integrado às melhores práticas de 
desenvolvimento. Principalmente, aplicações responsivas que 
executem na web, em dispositivos móveis e desktop. 


Porém, como nem tudo são flores, codificar com Angular será 
mais tranquilo para quem possui familiaridade com JavaScript, 
HTML e CSS. Outro aspecto que facilita é possuir algum 
conhecimento em linguagens orientadas a objetos. 


O objetivo desta obra é apresentar as principais características 
da plataforma, utilizando a versão 8 (atualizada para versão 11), 
através da implementação de uma aplicação que guiará os 
capítulos. Logo, você não vai encontrar um capítulo teórico 
dedicado aos conceitos de componentes, serviços, roteamentos ou 
validação de formulários, porém, vai, sim, explorar esses tópicos 
identificados dentro de um requisito do projeto. 


Ainda, vamos integrar a aplicação ao Firebase do Google, 
utilizando diversos recursos como banco de dados, autenticação, 
armazenamento de arquivos, execução de funções no lado do 
servidor e hospedagem do sistema. 


No início de 2021, atualizamos o livro para a versão 11 do 
Angular, além das outras bibliotecas utilizadas na construção 
do projeto. Se você adquiriu o livro anteriormente, gravei um 


vídeo mostrando os passos para atualizar o projeto. O link 
está disponível em: https://youtu.be/qlAsbirmu'Tk. 





PÚBLICO-ALVO E PRÉ-REQUISITOS 


Este é livro é destinado a todos que desejam construir 
aplicações JavaScript com alta produtividade e usar os principais 
recursos do Firebase no desenvolvimento de soluções escaláveis 
sem se preocupar com o gerenciamento da infraestrutura. 


Como pré-requisito é necessário que o/a leitor/a tenha 
conhecimentos básicos em HTML, CSS e JavaScript. O foco será 
nas particularidades do framework na implementação dos 
requisitos, explorando as potencialidades e poder do Angular. 


Todo código desenvolvido durante os capítulos estará 
disponível no repositório do GitHub, indicado nos finais das 
seções ou durante os capítulos. 


Ao final do livro, você terá desenvolvido um sistema de 
requisições completo, explorando os principais conceitos do 
framework, além de integrar a aplicação aos serviços da plataforma 
Firebase. 
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CaríTULO 1 


INTRODUÇÃO 


Neste capítulo, vamos apresentar brevemente as tecnologias 
envolvidas na codificação da aplicação e o estudo de caso que 
guiará a implementação em Angular 11. 


1.1 ANGULAR 


Angular é um framework mantido pelo Google para a 
construção de aplicações web, mobile e desktop. 


Lançado em 2012 como AngularJS, tornou-se um dos 
frameworks JavaScript mais populares, simplificando a forma de 
programar para web, alinhando componentes a padrões de projeto 
como injeção de dependências e arquitetura MVC (Model-View- 
Controller). 


A partir da segunda versão o Angular foi totalmente 
restruturado. No momento da atualização deste livro (fevereiro de 
2021), a versão utilizada é a 11. 
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AS VERSÕES 


Embora você não precise se preocupar com as constantes 
atualizações do Angular, recomendo fortemente utilizar a 
mesma versão para acompanhar o projeto desenvolvido no 
livro, evitando a quebra do código ou mudança de 
nomeclatura de métodos. As versões das bibliotecas utilizadas 
estão no arquivo  package.json , disponível no link 
https://bit.ly/3q20UNp. 


O Google reconhece o compromisso de estabilidade da 


estrutura, garantindo que ferramentas e práticas não se 


tornem obsoletos. 





Uma das principais vantagens na utilização de frameworks é 
forçar o desenvolvedor a adoção de padrões. Embora isso seja 
motivo de discussões, pois de certa forma leva o desenvolvimento 
numa caixinha, por outro, traz grandes vantagens como 
produtividade. 


Sobre o tema produtividade temos especificamente o Angular 
CLI. Essa ferramenta de comando permite a construção de 
aplicações e a geração de artefatos, componentes e classes de forma 
rápida. Faremos uso intenso dessa ferramenta durante a 
construção da aplicação. 


Dentre outros atributos que pesam a favor do desenvolvimento 
utilizando Angular, temos recursos modernos de plataforma da 
web para fornecer experiências semelhantes a aplicativos com 
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PWA (Progressive Web Application). Com esses recursos e diversos 
produtos é possível criar aplicativos móveis utilizando Cordova, 
Ionic e Native script ou desenvolver sistemas desktops, com acesso 
a APIs dos sistemas operacionais. 


Logo, nota-se a versatilidade do framework na construção de 
soluções para diversas plataformas e dispositivos. 


Angular é atualmente um dos grandes frameworks do 
mercado, ao lado de React e Vue e com isso é crescente a demanda 
por profissionais habilitados na construção de soluções de 
software. 


Como linguagem background, o Angular utiliza o TypeScript, 
que veremos a seguir. 


1.2 TYPESCRIPT 


É a linguagem utilizada para codificação no Angular, uma 
sintaxe clara é fácil de entender compilado para JavaScript. Criada 
e mantida pela Microsoft (que também disponibilizou a IDE 
Visual Studio Code), ela funciona como um superconjunto do 
ES2015 que fornece entre outros benefícios a tipagem estática, 
classes, módulos e namespaces. 


Na sequência, um exemplo de classe em Type e JavaScript: 
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Typescript Javascript 





class Greeter { var Greeter = (function () ( 
greeting: string; function Greeter(message) ( 
constructor (message: string) ( this.greeting = message: 
thisgreeting = message: ) 
) Greeterprototype.greet = function () ( 
greet() ( return "Hello. " + this.greeting: 
return "Hello, " + this.greeting; ): 
return Greeter. 
DO: 








Figura 1.1: Classes em Type e Javascript. Fonte: https://il.wp.com/www.dunebook.com/wp- 
content/uploads/2017/03/Typescript-and-the-Javascript-code.jpg?ssl=1 


Caso você tenha interesse em conhecer melhor sobre 
TypeScript recomendo os links a seguir sobre a sintaxe: 


e https://www.alura.com.br/curso-online-typescript-partel - 
TypeScript parte 1: Evoluindo seu JavaScript. Curso em 
português da Alura, voltado ao básico, apresenta desde 
vantagens da tipagem a conceitos de herança e 
reaproveitamento do código. 


e https://www.typescriptlang.org/docs/home.html - 
Documentação oficial do TypeScript. Site em inglês, há no 
menu um playground onde é possível criar códigos e 
acompanhar as saídas e a compilação em JavaScript. 


Não há necessidade de conhecimento intermediário ou 
avançado na linguagem. As funções serão explicadas e toda vez que 
um recurso novo surgir será fornecido detalhes da sua 
implementação. 
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1.3 O ESTUDO DE CASO 


É muito frustrante quando procuramos material de estudos em 
uma linguagem ou tecnologia nova e não encontramos nada “real”. 
A maioria são exemplos toys que até contribuem para o 
entendimento de uma abordagem, mas que não trazem 
significados concretos quando construímos sistemas. 


Neste livro, proponho um sistema que permita explorar os 
conceitos fundamentais do framework como componentes, rotas e 
serviços. Vamos integrar nossa aplicação com o Firebase, 
utilizando serviços de autenticação, armazenamento de dados e 
execução de funções no lado do servidor. Embora de contexto 
simples, cobrirá todos esses aspectos, e a partir disso você poderá 
construir desde sistemas com modelagem simples aos mais 
complexos. 


No macrocontexto, vamos criar um sistema de requisições 
internas. A aplicação deve permitir o gerenciamento dessas 
requisições oriundas de qualquer funcionário, devidamente 
cadastrado, e a solicitação deve ser destinada a um departamento. 
Somente funcionários do departamento solicitado é que podem 
atualizar o status da requisição. 


A imagem a seguir apresenta os requisitos funcionais. 
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Figura 1.2: Use Case para o sistema de requisições 


A cada atualização do status, o solicitante será notificado por e- 
mail sobre o andamento da requisição. Deste modo, podemos 
trabalhar com funções no servidor, mais precisamente com o 
Firebase Functions, representado pelo user Sistema na figura. 


Com este caso de exemplo, será possível lidar com uma grande 
quantidade de características do framework, e nos guiaremos 
sempre pelas práticas recomendadas na construção de sistemas. 


No próximo capítulo vamos preparar o ambiente, instalando as 
dependências necessárias para início da codificação. 
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CAPÍTULO 2 


AMBIENTE DE 
DESENVOLVIMENTO 


Quem está acostumado com a instalação de programas com 
interfaces gráficas, o famoso “Clique em próximo”, pode estranhar 
um pouco o uso de linhas de comandos em terminais. No entanto, 
com o uso frequente, nota-se a praticidade na criação, testes e 
publicação de projetos. Somente no primeiro programa a 


instalação é gráfica e necessária para passos posteriores. 


2.1 NODEJS 


O Node.js inclui o gerenciador de pacotes npm , responsável 
pela instalação de plugins, bibliotecas e o próprio Angular. No site 
https://nodejs.org/en/download, encontre a versão correspondente 
ao seu sistema operacional. A instalação é simples e não requer 
configuração opcional. 


Current 

Latest Features 
D Š de 
ao 


Windows Installer macOS Installer Source Code 


Figura 2.1: Opções de download NodeJS 
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Após a instalação, abra um terminal ( cmd.exe ou PowerShell 
no Windows | terminal no Mac) e digite o comando: 


node -v 


Se tudo ocorreu bem a versão do programa é impressa na tela. 
Depois de instalado, o comando npm ficará disponível no 
terminal. A instalação de novos pacotes segue o formato npm 
install nome-do-pacote. 


Para os próximos programas utilizaremos esse comando para 
efetivar as instalações. 


2.2 INSTALAÇÃO DO ANGULAR 11 


Vamos instalar o framework Angular na versão 11 (11.1.2) 
utilizando o gerenciador de pacotes NPM. Com o terminal aberto, 
digite: 


npm install -g @angular/cli@11.1.1 
No Linux ou OSX terminal acrescente o sudo : 
sudo npm install -g @angular/cli@11.1.1 


Após a conclusão do download temos acesso global ao 
Angular CLI através do comando ng seguido de outros 
parâmetros. Ainda no terminal, podemos conferir a versão 
instalada informando ng --version . A imagem posterior 
apresenta o resultado do comando. 
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Figura 2.2: Resultado do comando ng --version 


Entre outras informações, o console apresenta a versão do 
Angular CLI (11.1.1), no momento da atualização do livro, versão 


no Node e dos pacotes que compõem o core do framework. 


2.3 EDITOR DE DESENVOLVIMENTO 


Esta seção apresenta uma sugestão de editor para codificar seus 
projetos. 


O Visual Studio Code, ou popularmente chamado de VSCode, 
está disponível em https://code.visualstudio.com. Além de possuir 
uma quantidade enorme de extensões que facilitam a 
programação, como autocomplete, indentação, integração nativa 
com GIT, entre outros (a lista é extensa...), a ferramenta é leve e 


possui um terminal integrado. 


Baixe e instale o editor. 
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Debug Terminal Help 


login.componentts x 
» OPEN EDITORS { AuthenticationService ) 


4 REQUISICOES-APP t { Router ) f 


OnInit { 


authServ: AuthenticationService, private router: Router 


ngOnInit 


signin 

funcionario.mo 

o is.email == 
.senha == 


TERMINAL 





Figura 2.3: Visual Studio Code 


(1) Menu lateral- Estrutura do projeto, arquivos e pastas; 

(2) Área central - Arquivos abertos em abas; 

(3) Acessórios - Abas que apresentam os problemas, saídas e um te 
rminal integrado. 


Nosso ambiente para codificar está pronto. Na próxima seção 
vamos criar O projeto. 


2.4 ANGULAR CLI - CRIAÇÃO DO PROJETO 


Utilizando o prompt de comandos, vamos utilizar o Angular 
CLI para a criação do projeto e geração de outros artefatos. Abra o 
terminal e navegue até um diretório de sua escolha e digite: 


ng new requisicoes-app 


Vamos entender os comandos: 


10 2.4 ANGULAR CLI - CRIAÇÃO DO PROJETO 


* ng - CLI do angular 
* new - criação de um novo projeto 
* requisicoes-app - nome do projeto 

Informamos o mínimo necessário para iniciar um novo 
projeto. Há outros parâmetros que você pode passar na construção 
de um novo projeto. 


A relação de todos os comandos pode ser encontrada na página 
oficial do Angular CLI wiki (https://github.com/angular/angular- 
cli/wiki). Após confirmarmos o comando com a tecla Enter , 
algumas questões serão exibidas no terminal: 


À ng new r app 
Would you like to add Angular routing? 
Which stylesheet format would you like to use? (Use arro 





Figura 2.4: Criando o projeto com Angular CLI 


A primeira diz respeito às rotas. Veremos no capítulo 5 o que 
são e como mapear. 
Neste momento, o importante é confirmar para que crie um 
arquivo específico que mapeia as rotas. Informe Y. 


A segunda é sobre o formato do estilo. Deixaremos o primeiro, 
CSS, pois não utilizaremos recursos avançados que justifiquem a 
escolha de outras linguagens como SASS ou SCSS. 


Será criada toda estrutura de arquivos e serão baixadas as 
dependências iniciais da aplicação, como os pacotes common , 
core e compiler . Detalhes dos pacotes são encontrados no 
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arquivo package. json , na raiz do projeto. 


Vamos navegar até o diretório do projeto criado para executar 
o projeto. Para isso, no terminal insira: 
cd requisicoes-app 

Já é possível ver o projeto executando com o comando: 


ng serve --o 


O argumento --o indica para abrir no navegador padrão o 
endereço: http://localhost:4200/. 


C O localhost:4200 


Welcome to requisicoes-app! 


Here are some links to help you start: 
- Tour of Heroes 
« CLI Documentation 


- Angular blog 





Figura 2.5: Servidor executando localmente o projeto 


O Angular inicia um servidor local com seu projeto compilado 
e executado. 


2.5 ARQUITETURA DA APLICAÇÃO 


Vamos conferir a estrutura criada pelo Angular e apresentar a 
arquitetura gerada pelo Angular CLI . Faremos isso utilizando o 
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VSCode. 


Na seção anterior, o último comando estava executando o 
projeto. Interrompa o processo com CTRL + C e logo em seguida 
informe: 


code 


Este comando abre o editor com o projeto criado. A figura 
seguinte apresenta a visão lateral de pastas e arquivos. 


b OPEN EDITORS 
4 REQUISICOES-APP 


editorconfig 


gitignore 


README.md 


tsconfig.json 


tslintjson 





Figura 2.6: Estrutura inicial do projeto 


No primeiro nível do projeto podemos destacar as seguintes 
pastas e arquivos: 
* e2e: contém arquivos responsáveis pelos testes unitários; 
* node modules: armazena todas as bibliotecas listadas no arquivo 


package. json; 
* package. json: referências de todas as dependências npm que o pr 
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ojeto utiliza; 

* angular. json: configurações do Angular CLI para criação, execuç 
ão e testes; 

* src: pasta contendo arquivos-fontes do projeto. 


Na pasta src podemos destacar os seguintes arquivos: 


* index.html: arquivo root, a partir dele é executada a SPA; 

* app.components.ts: nomeado como AppComponent, define a lógica p 
ara o componente raiz; 

* app.component.html: define o template HTML associado ao compone 
nte AppComponent ; 

* app.component.css: define a base CSS; 

* app.module.ts: define o módulo raiz, chamado de AppModule; é o 
local onde declaramos outros módulos, componentes e serviços; 

* assets: local onde salvamos arquivos estáticos da aplicação com 
o imagens. 


2.6 ESTILIZANDO A APLICAÇÃO COM 
BOOTSTRAP 


Planejar a fonte, tamanho, disposição, cor, layouts e temas são 
tarefas com que o desenvolvedor front-end lida no processo de 
construção de aplicações. 


Uma possibilidade é a utilização de um framework que forneça 
componentes estilizados e adaptativos. Nesse sentido, optei pelo 
uso do Bootstrap já personalizado com temas, disponível no site 
https://bootswatch.com. 
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BooTSTRAP 


Bootstrap é um framework web com código-fonte aberto para 
desenvolvimento de componentes de interface e front-end 


para sites e aplicações web usando HTML, CSS e JavaScript, 


baseado em modelos de design para a tipografia, melhorando 
a experiência do usuário em um site amigável e responsivo. 
(https://pt.wikipedia.org/wiki/Bootstrap (framework front- 
end)) 





Após escolher um tema do seu gosto (eu escolhi o tema 
Materia), copie o conteúdo do arquivo bootstrap.min.css para 
arquivo style.css do projeto. 


O próximo passo é planejar a organização dos artefatos de 
nossa aplicação, de acordo com sua funcionalidade. A imagem a 
seguir ilustra a composição das pastas que deixaremos criado 
abaixo de src/app . 





app 





= = = «= 
core components models modules services 


Figura 2.7: Paleta do terminal 
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Na pasta core serão colocadas as classes e interfaces 
disponíveis para toda a aplicação. 


Na pasta components ficarão os componentes. Cada 
componente é composto de uma classe, um template e um arquivo 
de estilo. 


Os modelos serão inseridos em models . São as classes que 
representam as entidades do negócio. Em modules ficarão os 
módulos de componentes, que serão reutilizados. 


Finalmente, a pasta services será o destino de classes que 
acessam o banco, autenticação e outros recursos. 


2.7 PRIMENG - COLEÇÃO DE COMPONENTES 
RICOS 


No processo de desenvolvimento de aplicações é comum a 
necessidade de componentes específicos para determinadas tarefas, 
por exemplo para criar tabelas, caixas de entradas personalizadas e 
dialogs. Codificar do zero pode levar tempo e recursos. 


Dessa forma, podemos integrar nossa aplicação para finalizar 
com a biblioteca PrimeNG. 


PriIMENG 


PrimeNG é uma coleção com mais de 80 componentes de UI 


ricos para Angular. Todos os widgets são open source e 


gratuitos para uso sob licença MIT. 
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No site da biblioteca, https://www.primefaces.org/primeng, 
temos acesso à documentação com exemplos de utilização e 
demonstração de cada componente. 


A seguir, um exemplo dos passos para utilizar um componente 
que exibe um calendário. 


1. Realizeo import do módulo específico: 
import (CalendarModule) from 'primeng/calendar'; 
2. Declaração da tag do componente no html: 


<p-calendar [(ngModel)]="value"></p-calendar> 


A figura a seguir apresenta o componente. 


| 





April 2019 
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Figura 2.8: Componente calendário 


Para instalar a biblioteca, no terminal digite os seguintes 
comandos: 


npm install primeng011.2.0 --save 
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npm install primeicons04.1.0 --save 

npm install primeflex02.0.0 --save 

npm install QGangular/animationsQ11.1.2 --save 
npm install QGangular/cdk011.1.2 --save 


Com isso, instalamos a biblioteca PrimeNG, um conjunto de 
ícones, uma biblioteca de utilitários CSS e uma lib para habilitar 
animações. Esta última requer a importação do módulo, passo que 
faremos a seguir. 


MóDULOS 


São arquivos definidos com a diretiva NGModule para 


agrupar componentes, diretivas e serviços. 





No arquivo app.module.ts disponível na pasta src/app 
vamos realizar o import do módulo, declarando no array de 
imports, conforme trecho do código a seguir: 
import (BrowserModule) from 'Gangular/platform-browser'"; 


import (BrowserAnimationsModule) from 'QGangular/platform-browser/ 
animations'; 


(QNgModule( 
imports: [ 
BrowserModule, 
BrowserAnimationsModule, 
pd Aa 


O próximo passo é definir no arquivo angular.json , 
encontrado na raiz do projeto, os caminhos dos arquivos de estilos. 
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Encontre a seção styles e insira 3 linhas abaixo 
src/styles.css , ficando assim: 


"styles": [ 
"src/styles.css", 
"node modules/primeicons/primeicons.css", 
"node modules/primeng/resources/themes/nova/theme.css", 
"node modules/primeng/resources/primeng.min.css", 


l: 


de 


Definimos os arquivos de estilos, ícones e o tema. Você pode 


escolher outros consultando a página da biblioteca. 


A partir de agora, para cada componente que usarmos, 


devemos importar o módulo correspondente, conforme exemplo 


no começo da seção. 


Nosso ambiente e projeto já estão devidamente configurados e 


temos tudo pronto para iniciarmos a implementação. 


No próximo capítulo vamos criar uma conta no Firebase 


para encaminhar as questões de armazenamento e autenticação. 
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CaríTuULO 3 


FIREBASE - A 
PLATAFORMA DE 
SERVIÇOS DO GOOGLE 


Um dos principais dilemas na construção de qualquer software 
está na criação, organização e manutenção na base de dados. Para 
dispositivos, essa funcionalidade deve levar em consideração ainda 
outros aspectos na implementação como disponibilidade, tempo 
da consulta, formas de acesso e armazenamento, para citar 
algumas. 


Levando em conta este cenário, o Google oferece uma 
infraestrutura recheada de recursos, possibilitando qualidade e 
escalabilidade. O desenvolvedor pode direcionar seus esforços a 
outras atividades, como no engajamento dos usuários, deixando 
que o Google dimensione automaticamente a infraestrutura. 


Uma questão interessante está no preço do serviço. O plano 
SPARK é gratuito e possui limites generosos, permitindo ao 
desenvolvedor testar e publicar as principais funcionalidades sem 
custos. 


Neste capítulo realizaremos dois passos fundamentais: 
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1. Criação do projeto na página do Firebase para configuração 
do nosso provedor de back-end paras os serviços. 
2. Instalação das bibliotecas Wangular/fire e do SDK. 


Na próxima seção criaremos o projeto na página oficial do 
Firebase e depois, retornaremos ao código para instalar as 
dependências, integrar e configurar o acesso. 


3.1 CRIAÇÃO DO PROJETO NO CONSOLE DO 
FIREBASE 


Acesse o site https://firebase.google.com/?hl=pt-br e clique em 
Ir para o console . Será necessário ter uma conta Google para 
realizar o login. 


Boas-vindas ao Firebase 


Ferramentas do Google para desenvolver ótimo: 






anuncios para dispositivos moveis 


Q Saiba mais = Documentação [I Suporte 





Projetos recentes 


+ 


Adicionar projeto 


Q Explorar projeto de demonstração 


Figura 3.1: Adicionando o projeto 
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Após informados o usuário e senha, você será redirecionado 
para a tela do console. Clique no botão Adicionar projeto . Dê 
um nome e selecione o país/região. 


Adicionar um projeto x 
Nome do projeto 

= -m+<b 
re tr 
digo do projeto 6) 


requisicoes-app 4 


cais A 
Locais (7) 


Estados Unidos (Analytics 
nam5 (us-central) (Cloud Frestore 


> 


4 


B Usar as configurações padrão para compartilhar os dados do Google 





Analytics para Firebase 
“A i) Analyt am t ec ) Firebase 
c jo & 5 gie para melhora Drac e 
serviços da empres 
“ Comparthe seus da jo Analyt í ) Go0y ara ativar O suporte técnice 
v Compartilhe seus dados do Analytics com o Googie para ativar o Comparativo de 
v a do Analyt 108 especialistas err itas do Google 





E Aceito os termos do controlador. Isso é necessário ao compartilhar dados 
do Analytics para melhorar os produtos e serviços do Google. Saiba mais 


fa 


Figura 3.2: Criando o projeto na página do Firebase 
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Ao clicar no botão Criar projeto , aguarde alguns instantes. 
Haverá um redirecionamento para a tela administrativa, conforme 
a figura seguinte. 


Firebase 


requisicoes-app BRR 


Desenvolver 


Comece adicionando o 


Firebase ao seu 
aplicativo 

Nosso SDK principal tem acesso à maioria dos recursos do 
Firebase e inclui o Firebase Analytics de apps para iOS e 


Android 
Qualidade 


BE 000 < 


Figura 3.3: Dashboard do Firebase 





A partir desse painel temos acesso a diversos serviços e 
configurações para integrar no projeto. 


3.2 AUTENTICAÇÃO 


Desenvolver um sistema de autenticação seguro pode levar 
tempo e recursos. O Firebase Authentication fornece uma 
solução completa, proporcionando uma experiência positiva para 
os usuários finais. 


Vamos habilitar a autenticação no painel. Observe na imagem 
anterior, no menu esquerdo, Authentication. Clique para ativar o 
método e escolher o provedor de login. 


Há vários provedores (métodos de login), como Facebook, 
Twitter, Google. Vamos ativar a primeira opção, E-mail/Senha . 
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Ative e confirme no botão Salvar , conforme a imagem 
seguinte: 


E-mail/senha 


ativar O 


Permite que os usuários se inscrevam usando o endereço de e-mail e a senha deles. Nossos SDKs 
também oferecem verificação de endereço de e-mail, recuperação de senha e primitivos de 
alteração de endereço de e-mail. Saiba mais A 


Figura 3.4: Habilitando o método de autenticação 


Outro passo importante é definir um usuário. Clique na guia 


Usuários. 


Authentication 


Usuários Método 





Figura 3.5: Adicionando o usuário 
Logo em seguida, clique no botão Adicionar usuário . 
Figura 3.6: Adicionando o usuário 


Dê um e-mail e uma senha com no mínimo 6 caracteres. Já 
temos um usuário para acessar os dados. 


Vamos escolher a solução de dados. 
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3.3 CLOUD FIRESTORE - ARMAZENAMENTO 
DE DADOS EM ESCALA GLOBAL 


Vamos à questão crucial no desenvolvimento de aplicações, 
que está no armazenamento de dados. O desenvolvedor precisa 
ater-se à disponibilidade, segurança, manutenção e principalmente 
à escalabilidade. 


O Firebase propõe a resolução dessas questões através do 
cloud Firestore . É uma solução de banco de dados baseada em 
documentos NoSQL que facilita a gerência, sincronização e 
consulta de dados em escala global. 


Os dados são estruturados em coleções de documentos, e 
conforme aumenta a base, as consultas são dimensionadas 
conforme os resultados, permitindo o escalonamento transparente 
para a empresa. 


No Dashboard, clicando no menu esquerdo, Database , você 
verá a seguinte tela na primeira vez. 


Firebase 


Cloud Firestore 


Recursos do Realtime Database de última 
geração com consultas e escalonamento 
automático mais eficientes 


Criar banco de dados 


Qualidade 





Figura 3.7: Opção para integração 


Ao prosseguir com a criação do banco, uma tela solicita qual 


3.3 CLOUD FIRESTORE - ARMAZENAMENTO DE DADOS EM ESCALA GLOBAL 
25 


modo será selecionado ao iniciar o acesso aos dados. 


No modo bloqueado , o banco fica privado, assim, todas as 
leituras de gravação de terceiros serão negadas. Já no modo de 
teste , todas as leituras e gravações são permitidas. 


Regras de segurança do Cloud Firestore xX 


Depois de definir sua estrutura de dados, você precisará gravar regras para proteger seus dados. 
Saiba mais [4 


O Iniciar no modo bloqueado 








allow read, write: if false; 
O Iniciar no modo de teste 





@ Todas as leituras e gravações de terceiros 
serão negadas 


GARRIDO is ga 


Figura 3.8: Segurança 





Para nossa aplicação, somente usuários autenticados terão 
acesso (gravação e leitura) aos dados. Portanto, deveremos 
personalizar as regras de segurança. 


Clique em Ativar . Aguarde finalizar o processo e clique na 
guia Regras. 


Há um campo com a definição escolhida anteriormente. Altere 
a condição do if conforme o código a seguir: 
match /databases/(database)/documents { 


match /(document=**) { 
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allow read, write: if request.auth.uid != null; 


} 


Essa regra determina a leitura e escrita de todos os documentos 
da base somente se houver um usuário logado. É possível definir 
regras personalizadas para cada coleção ou operação de acesso. 


Na guia Dados podemos incluir coleções e documentos 
manualmente. A imagem a seguir mostra a inclusão da coleção 
funcionarios. 


Iniciar uma coleção 


D Definir código da coleção 2 Adicionar primeiro documento 





funcionarios 





Figura 3.9: Inserindo coleções 


Logo em seguida é possível a criação de um documento. No 
entanto, nossa aplicação é que fará a gestão das informações, 
portanto, finalizamos o passo do banco de dados. 


Antes de voltar ao código, vamos copiar os dados de conexão 
para utilizar no código da aplicação. 


Para isso, clique no menu Project Overview . Abaixo do 
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título Comece adicionando o Firebase ao seu aplicativo, temos a as 
opções de integração com as plataformas iOS, Android, Web e 
Unity. 


Comece adicionando o 
Firebase ao seu 
aplicativo 


Nosso SDK principal tem acesso à maioria dos recursos do 
Firebase e inclui o Firebase Analytics de apps para iOS e 
Android 


0900 < 


Figura 3.10: Opção para integração 





Clique no terceiro ícone. Abrirá um dialog com informações de 
conexão ao Firebase. 


Adicionar o Firebase ao seu aplicativo da Web x 


Copie e cole o snippet abaixo na parte inferior do seu HTML, antes de outras tags de script. 


<script src="https://www.gstatic.com/firebasejs/5.9.2/firebase.js"></script> 
<script> 
// Initialize Firebase 
var config = { 
apiKey: "AIzaSyCng_cba2SpK1MVI1l1478IUInfE5vV2UvIXxU", 
authDomain: “requisicoes-app.firebaseapp.com”, 
databaseURL: “https://requisicoes-app.firebaseio.com”, 
projectId: “requisicoes-app”, 
storageBucket: “requisicoes-app.appspot.com”, 
messagingSenderId: "192989744894" 
+: 


firebase. initializeApp(config); 
</script> 


Figura 3.11: Adicionar o Firebase ao aplicativo Web 


Vamos copiar esses valores para voltar no projeto Angular. 
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3.4 GANGULARFIRE - A BIBLIOTECA OFICIAL 
PARA FIREBASE E ANGULAR 


Voltando ao projeto, vamos trabalhar com a biblioteca oficial 
que auxilia nas operações com o Firebase e o próprio SDK. No 
terminal de comandos, digite: 


npm install QGangular/fire06.1.4 firebaseQ8.2.6 --save 


Serão adicionadas duas dependências no projeto. No momento 
em que atualizo o livro, suas versões são: 


e Qangular/fireo6.1.2 
e firebaseo8.2.6 


Não se preocupe se, ao instalar, você perceber versões maiores. 
O projeto (Gangularfire está em constante atualização para 
acompanhar as mudanças do SDK. 


Edite o arquivo /src/environments/environment.ts e cole 
as propriedades de acesso do Firebase. O código ficará assim: 


export const environment = { 

production: false, 

firebase: { 
apikey: "AIzaSyCng cba2SpKiMVIl478IUInfE5v2UvIxU", 
authDomain: "requisicoes-app.firebaseapp.com", 
databaseURL: "https://requisicoes-app.firebaseio.com", 
projectId: "requisicoes-app", 
storageBucket: "requisicoes-app.appspot.com", 
messagingSenderId: "192989744894" 


Abaixo da propriedade production criamos a propriedade 
firebase com as informações copiadas do painel no site do 
Firebase. 
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Finalmente, definimos as classes que utilizaremos do 
Gangularfire . No arquivo app.module.ts , vamos importar os 
módulos para o banco, autenticação e o arquivo de configuração. 
import { AngularFireModule ) from 'Qangular/fire'; 
import { AngularFirestoreModule ) from 'Qangular/fire/firestore'; 


import ( AngularFireAuthModule ) from 'Qangular/fire/auth'; 
import ( environment ) from '../environments/environment'!; 


Logo em seguida, no array de imports, declaramos os módulos 
AngularFireModule , AngularFirestoreModule e 
AngularFireAuthModule : 
imports: [ 
BrowserModule, 
AngularFireModule. initializeApp(environment .firebase), 


AngularFirestoreModule, 
AngularFireAuthModule, 


l: 


Em —aAngularFireModule.initializeapp() passamos a 
propriedade environment .firebase para conexão. Os outros 
módulos são responsáveis pelo banco e autenticação, 
respectivamente. 


Na seção a seguir implementaremos as classes responsáveis 
pelo modelo de dados. 


3.5 MODELO DE DADOS 


Antes de codificar as classes que serão as representações de 
dados, vamos antever uma questão sobre a manipulação de 
objetos. 


O Firebase só permite a manipulação de objetos JavaScript 
desserializados (salvar, atualizar), também chamados de objetos 
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literais. Como nossa modelagem definirá objetos customizados, 
isso significa que, em algum momento, precisamos tratar essa 
questão. 


Para isso, vamos utilizar a biblioteca class-transform. No 
terminal, digite: 


npm install class-transformerQ00.3.1 --save 


Essa biblioteca fornece métodos de serialização e 
desserialização de objetos. 


A primeira classe a ser implementada servirá como base para as 
demais classes do modelo de dados. Ela terá um método que 
resolve a conversão para uma classe literal, requisito para salvar 
dados no Firebase. 


Crie as pastas models e core em app . Em seguida, dentro 
da pasta core , criaremos o arquivo model.ts com o código a 
seguir: 


import ( classToPlain 3 from "class-transformer"; 


export abstract class Model { 
id: string; 


toObject(): object { 
let obj: any = classToPlain(this); 
delete obj.id; 
return obj; 


) 
} 

Inicialmente, importamos a biblioteca class-transformer , 
pois no método toobject() utilizamos o método 
classToPlain(this) para realizar a desserialização para uma 
classe literal. 
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Nossa classe é um modelo, logo fazemos uso da palavra 
reservada abstract e ela possui apenas uma propriedade id do 
tipo string. 


Vamos criar os modelos, herdando a classe Model. 


No terminal, após cada linha tecle enter : 


ng g class models/departamento --type=model --skipTests=true 
ng g class models/funcionario --type=model --skipTests=true 
ng g class models/requisicao --type=model --skipTests=true 


Serão gerados três arquivos na pasta models 
departamento.model.ts , funcionario.model.ts e 


requisicao.model.ts. 


O parâmetro --type=model é apenas uma convenção para 
nomenclatura e --skipTests está setado para true para não 
criar os arquivos de testes. 


Nos arquivos de modelos vamos definir as classes do negócio 
com suas características. 


A primeira classe será escrever a classe que representa o 

departamento. Abriremos o arquivo 

app/src/models/departamento.model.ts e codificaremos 
assim: 
import { Model } from '../core/model'; 
export class Departamento extends Model { 

nome: string; 

telefone?: string; 


} 


Depois do nome da classe, Departamento , utilizamos a 
palavra reservada extends informando a classe pai Model. Dessa 
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forma, herdamos a propriedade e o método definido na classe. 


Logo em seguida, declaramos as propriedades específicas do 

modelo como o nome e o telefone. Note que no atributo 

telefone declaramos assim: telefone? , com um sinal de 
interrogação na frente, indicando que é um campo opcional. 


Na classe Funcionario 
( app/src/models/funcionario.model.ts ) a diferença será 
somente nos atributos e no import da classe Departamento . 


import ( Departamento } from './departamento.model'; 
import { Model } from '../core/model'; 


export class Funcionario extends Model { 
nome: string; 

funcao: string; 

email: string; 

ultimoAcesso: Date; 

departamento: Departamento; 


Note que a propriedade departamento refere-se ao tipo da 
classe criada anteriormente. 


Finalmente, para a classe Requisicao 
( app/src/models/requisicao.model.ts ), vamos definir duas 
classes no mesmo arquivo, Requisicao e Movimentacao . Cada 
requisição gera um registro de movimento, assim, optei por incluir 
as definições das classes juntas para mostrar essa possibilidade. 


No código a seguir está a implementação da Requisicao . 
import ( Departamento } from './departamento.model'; 
import { Funcionario ) from './funcionario.model'; 


import { Model } from '../core/model'; 


export class Requisicao extends Model { 
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solicitante: Funcionario; 
dataAbertura: any; 
ultimaAtualizacao: any; 
descricao: string; 

status: string; 

destino: Departamento; 
movimentacoes: Movimentacao[]; 


Essa classe possui um campo que representa o histórico de 
movimentações, notado como movimentacoes: 


Movimentacao”]. 


Além disso, ela possui as propriedades para a abertura do 
chamado e última atualização, representados como 
dataabertura: any e ultimaAtualizacao: any , bem como o 
departamento responsável pela demanda, definido como 


destino: Departamento. 


Na classe Movimentacao , temos o funcionário que mudou o 
status da requisição, data e hora e a descrição da movimentação. 
export class Movimentacao extends Model { 

funcionario: Funcionario; 
dataHora: Date; 


status: string 
descricao: string; 


} 


Pronto, finalizamos a codificação das classes que representam 
o modelo de negócio do case que será implementado. 


O link das classes modelos está em https://bit.ly/36S09yK. 


Podemos observar que o Firebase é uma plataforma completa 
para o desenvolvimento de aplicações, com integração de 
autenticação de modo simples a armazenamento de informações. 
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Além disso, permite que o desenvolvedor não se preocupe com 
questões de gerenciamento da infraestrutura, já que a solução se 
encarrega de dimensionar os recursos, conforme aumenta a 
demanda do uso. 


No próximo capítulo, criaremos as classes de serviços para 
realização de operações no banco e o acesso aos dados. 
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CAPÍTULO 4 


SERVIÇOS 


Services (serviços) são artefatos que o próprio framework se 
encarrega de instanciar, além de gerenciar seu ciclo de vida, 
utilizando o padrão de projeto Singleton. 


SINGLETON 


É um padrão de projeto de software (do inglês Design 


Pattern). Este padrão garante a existência de apenas uma 
instância de uma classe, mantendo um ponto global de acesso 
ao seu objeto. 





Há uma distinção no Angular entre componentes e serviços a 
fim de aumentar a modularização e reutilização. O serviço é uma 
classe com um propósito de separar os papéis quanto à 
funcionalidade da aplicação. 


Nossa primeira codificação será a classe que trata do acesso aos 
dados. Um dos requisitos apresentados no estudo de caso do 
sistema é a autenticação do usuário. Somente usuários 
autenticados podem ler e gravar dados (como vimos no capítulo 
3). 
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O primeiro serviço será responsável justamente pela 
autenticação do usuário no sistema. 


Vamos criá-lo por meio do comando: 
ng g service services/authentication 


O comando é composto por: 


e ng g - gerar o artefato especificado pelo parâmetro 
seguinte; 

e service -tipo componente gerado; 

e services/authentication - diretório/nome da classe 
para o serviço. 


Observe a estrutura gerada: 


4 services 


authentication.servic 


authentication.servic 





Figura 4.1: Serviços responsável pela autenticação 


Uma pasta services foi gerada com dois arquivos. 


° authentication .service.spec.ts - classe para 
realização de testes. 

° authentication .service.ts - classe que será 
responsável pelas regras de autenticação. 


Em relação à primeira classe, não faz parte do escopo deste 
livro o uso de testes unitários (para saber mais, consulte a 
documentação em https://angular.io/guide/testing). Assim, na 
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criação dos próximos services utilizaremos uma flag no comando 
( --skipTests ) para não gerar as classes de testes, como fizemos 
no capítulo anterior. 


Vamos escrever a classe AuthenticationService a seguir. 


4.1 AUTENTICAÇÃO NO FIREBASE 


Começamos a implementação realizando o import da classe 

Injectable . Essa classe permite ao Angular realizar a Injeção de 

Dependência, controlando a instância assim que outros 
componentes invocarem suas funções. 


INJEÇÃO DE DEPENDÊNCIA 


É um padrão de desenvolvimento onde o framework injeta 
em cada componente suas dependências declaradas. 





Essa notação utiliza um decorator @ seguido do nome da 
classe em questão. 


DECORATOR 


É tipo especial de declaração que pode ser anexada a uma 


declaração de classe, método, propriedade ou parâmetro. 





import { Injectable } from '@angular/core'; 
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@Injectable({ 
providedIn: 'root' 


}) 


Logo a seguir, a propriedade providedIn especifica o nível de 
injeção, que no caso será na raiz da aplicação ( root ). 


O próximo passo são os imports da classe Observable , 
AngularFireauth ea lib firebase para implementar os 
métodos de login e logout. 
import { Observable ) from 'rxjs'; 


import ( AngularFireAuth } from 'QGangular/fire/auth'; 
import firebase from 'firebase/app'; 


Criaremos um objeto user dotipo firebase.User . Ele será 
um Observable e receberá notificações sempre que ocorrer 


alguma mudança no estado do usuário. Vamos declará-lo logo 
abaixo da assinatura da classe. 


private user: Observable<firebase.User>; 


No método construtor, injetamos a classe AngularFireAuth . 
Logo em seguida, passamos o estado de autenticação para o objeto 
user : 


constructor (private afAuth: AngularFireAuth) { 
this.user = afAuth.authState; 


} 


Com os objetos declarados e a classe AngularFireAuth 
injetada no construtor, nosso próximo passo é implementar os 
métodos de login e logout do sistema. 
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4.2 MÉTODOS DE LOGIN, LOGOUT E 
RECUPERAÇÃO DE SENHA 


No método de login, passamos dois argumentos do tipo string 
(email e senha) para a classe que injetamos no construtor. 
login(email: string, password: string): Promise<firebase.auth.Use 
rCredential> { 

return this.afAuth.signInwWithEmailandPassword(email, passwor 
d); 
Í 

O método signInwithEmailAndPassword() recebe os dois 

argumentos e retorna uma Promise com as credenciais do usuário. 


PROMISE 


Conceito essencial do JavaScript que representa a conclusão 


de operações assíncronas. 





Já no método logout() não passamos nenhum argumento e 
invocamos a função signOut() do AngularFireAuth para 
desconectar. 

logout(): Promise<void> { 


return this.afAuth.signout(); 
3 


Na próxima função vamos codificar uma opção que permita ao 
usuário solicitar a recuperação da senha. 


resetPassword(email: string) { 
return this.afAuth.sendPasswordResetEmail(email) 


} 


40 4.2 MÉTODOS DE LOGIN, LOGOUT E RECUPERAÇÃO DE SENHA 


Passamos um email no parâmetro para a função 
sendPasswordResetEmail() . Assim o Firebase envia um email 
com um link para redefinição de senhas para o email informado. 


Dessa forma, já temos o primeiro serviço codificado com os 
métodos responsáveis pela autenticação no sistema. 


A seguir, vamos codificar os próximos serviços pensando na 
modularidade e componentes que poderão ser reutilizáveis. 


4.3 INTERFACE GENÉRICA DE CRUD 


Planejar a criação de componentes consistentes e reutilizáveis é 
um fator importante da construção de sistemas. 


Rotinas para criação, leitura, atualização e exclusão de dados, 
do acrônimo em inglês CRUD (create, read, update e delete), são 
bem comuns, o que pode nos levar a escrever código 
desnecessariamente. 


Outro fator de atenção para iniciantes na programação do 
framework está no fato de que a maioria dos exemplos na internet 
sobre CRUD não separa a lógica de operações no Firebase, 
misturando na classe dos componentes. 


Essa prática não é recomendada na documentação do 
framework (https://angular.io/guide/styleguide). 


Pensando nisso, vamos separar os papéis de responsabilidade, 
utilizando também o poder da tipagem e orientação a objetos para 
escrever interfaces e classes que fornecerão recursos mais flexíveis 
na construção do sistema. 
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Na pasta app/core clique com o botão direito para criar um 

arquivo e nomeie-o como icrud.interface.ts . A interface 

ICrud é responsável pelos métodos que as classes deverão efetivar 
para acesso aos dados. 


import { Observable ) from 'rxjs'; 
export interface ICrud<T> { 


get(id: string): Observable<T>; 
list(): Observable<T[]>; 
create0rUpdate(item: T): Promise<T>; 
delete(id: string): Promise<void>; 


Inicialmente, declaramos a assinatura dos métodos, seus 
parâmetros, quando existirem, e o tipo de retorno. Na assinatura 
do método, cotamos como uma interface, e fazemos uso de 
Generics. 


GENERICS 


O parâmetro de tipo genérico é especificado em colchetes 
angulares <> após o nome da classe. Uma classe genérica 


pode ter campos genéricos (variáveis de membro) ou 


métodos. 





Para o R do CRUD, há dois métodos, get() que recebe um 
parâmetro do tipo string e um list. O retorno, especificado depois 
dos dois pontos ( : ) é do tipo Observable, porém o list() é um 
array <T[ ]>. 


No createorUpdate() , passamos o objeto como argumento 
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(item:T) e as funções retornam uma  Promise<T> . Na 
implementação do método nós verificamos quando é cada 
situação, criar ou atualizar. 


Finalmente, o método delete() recebe um id do tipo 
string eseu retorno é do tipo Promise<void>. 


Finalizada a definição da interface, o próximo passo é criar a 
classe que implementa os métodos. 


4.4 CLASSE DE SERVIÇOS GENÉRICA 


Na pasta core , crie um arquivo com o nome 
iservicefirebase.service.ts. 


Na assinatura da classe vamos declará-la como abstrata, pois 
servirá como base para outras classes do negócio. 


export abstract class ServiceFirebase<T extends Model> implements 
ICrud<T> { 


Para isso, identificamos a palavra reservada abstract . Além 
disso, logo depois do nome ServiceFirebase , tipamos para uma 
classe genérica estendendo de umas das classes modelos, conforme 
apresentada no capítulo 3. Note que também usamos a palavra 

implements seguida de ICRUD<T>, o que significa que devemos 
implementar todos os métodos da interface. 


O próximo passo é definir uma referência para a coleção de 
documentos. Fazemos assim: 


ref: AngularFirestoreCollection<T> 


Utilizamos a classe | AngularFireCollection da lib 
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Gangular/fire . Já no método construtor, atribuímos a 
referência passando o caminho da coleção. 
constructor(protected type: ( new(): T; }, protected firestore: 


AngularFirestore, public path: string) { 
this.ref = this.firestore.collection<T>(this.path); 


} 


(D ANGULARFIRE 


Para saber mais sobre a implementação, detalhes e exemplos, 
acesse a documentação em: 


https://github.com/angular/angularfire2/blob/master/docs/fir 


estore/collections.md 





A seguir vamos implementar os métodos. O primeiro método, 
get( ),recebeum id dotipo string . Criamos uma variável 
do tipo AngularDocument para, em seguida, utilizando o 
operador map , da biblioteca Rxjs, retornar um objeto. 
get(id: string): Observable<T> { 


let doc = this.ref.doc<T>(id); 
return doc.get().pipe(map(snapshot => this.docToClass(snapsho 


t))); 
2} 

Criamos o método docToClass() que utiliza a lib class- 
transformer , serializando o objeto. Um map retorna um 
Observable da classe passada no argumento do tipo. 

docToClass(snapshotDoc): T { 

let obj = { 


id: snapshotDoc.id, 
.. . (snapshotDoc.data() as T) 
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3 
let typed = plainToClass(this.type, obj) 
return typed; 


) 
No método list() , nós utilizamos a referência da coleção 
( ref ), invocando o método valueCchanges() , que retorna um 
Observable de array da classe genérica. 


list(): Observable<T[]> { 
return this,ref.valueChanges() 


3 
No trecho abaixo do método createorUpdate() está uma 
verificação do id para decidir o fluxo para atualização: 


return this.ref.doc(id).set(obj); 
ou para inclusão: 


this.ref.add(obj).then(res => { 
obj.id = res.id; 
this.ref.doc(res.id).set(obj); 


3) 

Observe que estamos passando o id na arrow function da 
Promise em obj.id = res.id e depois atualizando objeto. Isso 
garante que temos um valor criado automaticamente pelo Firebase 
no campo id do modelo. 


Finalmente, o método delete() é composto por um 
argumento id do tipo string. 
delete(id: string): Promise<void> { 
return this.ref.doc(id).delete(); 


} 


O código completo da classe está disponível em 
https://bit.ly/3aR28Uf. 
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A partir da referência da coleção, obtemos o documento e 
invocamos a função delete. 


Com os modelos, classe e interface do serviço base criado, 
podemos criar os serviços específicos para cada objeto do nosso 
modelo com poucas linhas. 


No terminal de comando informe: 


ng g service services/funcionario --skipTests=true 
ng g service services/departamento --skipTests=true 
ng g service services/requisicao --skipTests=true 


Criamos três serviços na pasta services . Como definimos 
anteriormente uma classe que já contém a lógica de operação aos 
dados no Firebase, o que devemos fazer nesse momento é herdar 
essas funcionalidades. 


Assim, a classe DepartamentoService 
( app/services/departamento.service.ts ) fica: 


export class DepartamentoService extends ServiceFirebase<Departam 
ento> { 


constructor(firestore: AngularFirestore) { 
super (Departamento, firestore, 'departamentos'); 


} 
Aplicaremos a herança da classe base ServiceFirebase 
usando extends ServiceFirebase<Departamento> . No método 
construtor, chamamos o método super() , que recebe a classe 


modelo Departamento , o objeto firestore injetada no 
construtor e o nome que daremos para a coleção. 


Uma convenção adotada aqui será nomear a coleção com o 
nome modelo no plural ( departamentos ). 
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As outras duas classes de serviços seguem o mesmo padrão. 
Mudaremos apenas a classe modelo e o nome da coleção, 
conforme o código a seguir. 


Primeiro, para a classe FuncionarioService 
( app/services/funcionario.service.ts ): 


export class FuncionarioService extends ServiceFirebase<Funcionar 
io> { 


constructor (firestore: AngularFirestore) { 
super (Funcionario, firestore, 'funcionarios'); 


} 
} 
E para a classe do outro serviço RequisicaoService 


( app/services/departamento.service.ts ): 


export class RequisicaoService extends ServiceFirebase<Requisicao 


>A 


constructor (firestore: AngularFirestore) { 
super (Requisicao, firestore, 'requisicoes'); 
} 
J 
Assim, nosso projeto já possui as classes de serviços 
responsáveis pela manutenção dos dados no Firebase. Trataremos 
no próximo capítulo os componentes que consumirão esses 
serviços, codificando a lógica e a interface gráfica aos usuários da 


aplicação. 
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CarírtuLo 5 


COMPONENTES - 
REQUISITO LOGIN 


No presente capítulo, codificaremos as interfaces gráficas e 
toda a lógica para consumir os serviços criados no capítulo 
anterior. 


Desenvolveremos os primeiros requisitos da aplicação, 
começando pelo login. Para acessar as funcionalidades do sistema, 
devemos criar um componente onde o usuário possa informar 
suas credenciais. Apresentaremos uma abordagem na utilização de 
formulários baseada em modelos. 


Nas seções seguintes vamos criar um painel e um menu, 
trabalhando com rotas, um importante conceito do framework em 
aplicações SPA. 


No quesito de segurança, criaremos guardas que protegerão o 
acesso às rotas sem a devida autenticação. Além disso, vamos 
avançar na organização do sistema ao trabalharmos com o 
compartilhamento de módulos, permitindo flexibilidade, 
legibilidade e melhor manutenção no código-fonte. 
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5.1 LOGIN 


A primeira implementação será resolver a permissão para 


acessar as informações, assim vamos gerar o componente login. 


No final da seção, deveremos ter a seguinte tela funcional: 


A — 


É ms Sistema de Requisições 


Email 


Informe o Email 


Senha 
Senha 


Ed RECUPERAR 


Figura 5.1: Tela de login 


Para criar o componente login no terminal digite: 


ng g component components/public/login --skipTests=true 
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GERAÇÃO DE ARTEFATOS E APRESENTAÇÃO DE CÓDIGOS 


Vou adotar duas práticas a partir desse momento. Para todos 
os artefatos gerados com Angular CLI a partir daqui, usarei 
mas não mencionarei a flag --skipTests . A segunda será 
durante a explicação do código. Na maioria das vezes, serão 
omitidos os imports das classes dos componentes, evitando 
um código muito extenso e quebrando a fluidez da leitura. 


Não se preocupe pois no final de cada seção, ou quando julgar 


importante, deixarei o link específico do requisito 
implementado do repositório no GitHub. 





Foi gerada uma hierarquia de pastas 
components>>public>>login . A última informação é o nome do 
componente, no caso, login, que contém 3 arquivos: 


e login.component.html: arquivo HTML onde definimos o 
template. 


e login.component.css: arquivo para estilizar os 
componentes usando CSS. 


e login.component.ts: classe onde codificamos os métodos, 
atributos do componente. 


Assim que gerada, a classe AppModule na pasta app foi 
atualizada com a inclusão de uma declaração do componente 
login: 


(QNgModule( 
declarations: [ 
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AppComponent, 
LoginComponent, 


l; 
Uma das vantagens de utilizar o Angular CLI é a declaração 
automática dos componentes no módulo principal. 


Primeiro, vamos utilizar uma biblioteca que fornece um popup 
customizável, responsível e muito bonito na exibição de alertas e 
mensagens, o SweetAlert2. 


No terminal de comandos, informe: 
npm install --save sweetalert@10.14.0 


Para utilizá-lo na classe, basta declarar o import da 
biblioteca: 


import Swal from 'sweetalert2' 


Vamos iniciar o código pela classe do componente login, 
definindo as propriedades e métodos do login, porém, antes, 
analisaremos o código gerado da classe LoginComponent 


( app/components/public/login/**login.component.ts ). 


Abaixo do import temos o seguinte código: 


(Component (1 
selector: 'app-login', 
templateUrl: './login.component.html'!, 
styleUrls: ['./login.component.css'] 


3) 


A diretiva (component identifica a classe imediatamente 
abaixo como uma classe de componente e especifica seus 
metadados: 


e selector: seletor CSS que diz ao Angular para criar e inserir 


5.1 LOGIN 51 


uma instância desse componente onde quer que encontre a 
tag correspondente no modelo HTML. No caso <app- 
login> </app-login>, o framework insere uma instância 
do componente entre as tags. 


e templateUrl: endereço relativo do template HTML. 


e styleUrls: endereço relativo do arquivo de estilos do 
componente. 


Começando a codificação da classe: 
export class LoginComponent implements OnInit { 


email: string; 

senha: string; 
mensagem: string; 
emailEnviado: boolean; 


Logo abaixo da assinatura export class LoginComponent , 
vamos declarar três atributos. Todos são do tipo string: email: 
string, senha: string, msg: string . E uma propriedade 
para controlar a exibição da mensagem quando solicitarmos a 
recuperação do e-mail: emailEnviado: boolean . 


No método construtor precisamos injetar o serviço responsável 
pelo acesso, AuthenticationService , e utilizar a classe Router 
para controlar a navegação. Escrevemos o método assim: 


constructor(private authServ: AuthenticationService, private ro 
uter: Router) ( 3 


O próximo passo é implementar o método para logar() . 
Primeiro, verificaremos o preenchimento dos atributos email e 
senha , que representam os campos de entrada. 
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Atribuímos uma mensagem caso um dos campos não esteja 


preenchido. 
logar() { 
try { 
if (this.email == undefined || 
this.senha == undefined) { 
this.mensagem = 'Usuário ou senha vazios! 
return 
} 


Na sequência, com o objeto authServ , invocamos o método 
do serviço informando no parâmetro o email ea senha: 
this.authServ.login(this.email, this.senha) 


«then(() => { 
this.router.navigate(['/admin/painel']) 


3) 


Depois do código .then(() >= , escrevemos na Promise, 
utilizando o objeto router para navegar até a rota 
/admin/painel . Essa rota será definida posteriormente na classe 
responsável pelo mapeamento das rotas. 


Agora, tratamos as exceções com o catch(erro =>) assim: 


.«catch(erro => { 
let detalhes = ''; 
switch (erro.code) { 
case 'auth/user-not-found': { 


detalhes = 'Não existe usuário para o email informa 
do"; 

break; 

3 

case 'auth/invalid-email': { 
detalhes = 'Email inválido"; 
break; 

3 

case 'auth/wrong-password': { 
detalhes = 'Senha Inválida'; 
break; 
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} 


default: { 
detalhes = erro.message; 
break; 
} 
} 
this.mensagem = "Erro ao logar. ${detalhes}`; 
H); 


Com o operador de controle switch , nós verificamos os tipos 
de erros que podem surgir ao logar no Firebase, atribuindo uma 
mensagem mais amigável para a variável detalhes . 


Finalizamos a implementação tratando o catch genérico do 
try logo no início da implementação: 


} catch (erro) { 
this.mensagem = "Erro ao logar. Detalhes: ${erro}`; 


} 


Finalmente, escrevemos o método enviaLink() . Essa função 
permite o processo de recuperação de senhas ao deixar que a 
plataforma se encarregue de enviar e-mails para inicialização de 
uma nova senha. 

async enviaLink() { 

const { value: email } = await Swal.fire({ 

title: 'Informe o email cadastrado', 
input: 'email', 


inputPlaceholder: 'email' 


3) 


Antes do nome do método, incluímos a palavra reservada 
async , que define uma função como assíncrona. Para acessarmos 
os recursos da biblioteca Sweetalert2 , fazemos o import , 
como visto na instalação. A partir disso podemos utilizar os 
métodos através do objeto Swal. 


Definimos algumas propriedades para a exibição do popup 
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como title, input e inputPlaceholder. 


O método fire é responsável por lançar os alerts com base 
nas configurações das propriedades informadas na sequência. 


Logo em seguida, verificamos se o campo email foi 
preenchido, invocando o método do serviço que solicita o envio da 
senha: 


if (email) { 
this.authServ.resetPassword(email) 


«then(() => { 
this.emailEnviado = true; 
this.mensagem = `Email enviado para ${email} com inst 
ruções para recuperação. ` 
3) 
.«catch(erro => { 
this.mensagem = "Erro ao localizar o email. Detahes ${e 
rro.message)” 
3) 


O atributo definido como this.emailEnviado = true; será 
responsável pela exibição da mensagem atribuída na sequência. 
Tratamos também o erro com catch() , exibindo os detalhes do 
erro. 


O resultado dessa implementação do comando será: 
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Informe o email cadastrado 


Figura 5.2: Popup para recuperar senha 


O próximo passo é obrigatório para manipular formulários. 
Devemos importar no módulo principal a classe FormsModule na 
seção import em app/app.módulo.ts : 


import ( FormsModule } from 'QGangular/forms'!; 


Depois fazemos a declaração da classe no array de imports 
no mesmo arquivo: 
imports: [ 

//Outros imports omitidos 


FormsModule, 


Já temos a lógica do componente implementada. Vamos 
codificar o template html da classe para exibir o formulário do 
login com os campos de entradas e botões de ação. 


5.2 TEMPLATE DRIVEN - FORMULÁRIO DE 
LOGIN 


Há duas abordagens no Angular para trabalhar com 
formulários. 


Os formulários reativos (Reactive Forms) são caracterizados 
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por serem reutilizáveis e escalonáveis e seu uso está relacionado a 
construções de aplicações que já utilizam o padrão reativo. 


Já os formulários orientados por modelos (Template Driven) 
são indicados para adicionar um formulário simples a um 
aplicativo, como um formulário de login. Será exatamente a nossa 
implementação a seguir. 


Abra © arquivo do template no caminho 


app/components/public/loginlogin.component .html. 


O código completo do template está disponível em: 
https://bit.ly/2PGJIM2, assim focaremos nas particularidades do 
framework, já que detalhes do HTML não estão no escopo do 
livro. 


A seguir, o código do campo para caixa de entrada do email: 


<input class="form-control" name="emailControle" gemailControle=" 
ngModel" type="text" placeholder="Informe o Email" 
[(ngModel)]="email" maxlength="60" email required> 
Criamos uma variável gemailElement e referenciamos ao 
ngModel . Usamos também a notação two-way data binding, 
representada com [(ngModel)]="variável" , informando o 
email na variável. 


Isso garante que a atualização ocorra no template e na classe do 
componente a qualquer momento, independente do lugar onde a 
alteração se iniciou. 


Na sequência, vamos exibir as mensagens de validação do 
campo email: 


<div *ngIf="emailControle. invalid" class="text-danger"> 
<div *ngIf="emailControle.errors.required">Email é obrigatór 
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io</div> 
<div *ngIf="emailControle.errors.email">Email inválido</div> 
</div> 


Conseguimos acompanhar as alterações de estado e a validade 
dos controles de formulário. Usamos a diretiva de controle *ngIf 
para verificar a validade da variável emailcontrole. invalid . Se 
verdadeiro, verificamos a obrigação do preenchimento com 

emailControle.errors.required e se é um campo do tipo 
email com emailControle.errors.email. 


O resultado da validade é apresentado conforme o usuário 
interage com o formulário: 


Email 


ks ksks| 


Email inválido 


Figura 5.3: Validação para email 


Fornecemos, ainda, feedback visual usando classes CSS no 
primeiro div em class="text-danger" , definindo o texto na 
cor vermelha. 


Email 


Informe o Email 
Email é obrigatório 


Figura 5.4: Campo obrigatório 


O campo da senha segue a mesma lógica. Definimos uma 
variável de template gpasswordControl e as propriedades de um 
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campo de senha comum como type="password" e o two-way 
data binding para o atributo senha da classe login : 
<input name="passwordControl" tpasswordControl="ngModel" T[(ngMo 


del)]="senha" type="password" class="form-control" placeholder="S 
enha" required minlength="6" maxlength="30"> 


Na sequência, vamos codificar os botões. O primeiro botão 
será responsável pela submissão do formulário para logar. 


<button type="submit" class="btn btn-info btn-block" (click)="lo 


gar()"> 
<i class="fas fa-sign-in-alt"></i> Logar</button> 


Usamos a expressão ( ) para indicar que é um event binding 
para o evento click do botão. Em seguida, atribuímos ao 
método logar() jáimplementado na classe do componente. 


Event BINDING 


Utilizado para passar os dados do template para a classe do 
componente. Como exemplos de eventos temos 


pressionamentos de tecla, movimentos do mouse, cliques e 


toques. 





E, finalmente, codificamos o botão para enviar o link de 
recuperação de senha, informando o método enviaLink() : 
<button type="submit" (click)="enviaLink()" class="btn btn-lg btn 
-success btn-block text-uppercase"> <i class="far fa-envelope"></ 


> Recuperar</button> 


Para visualizar o código de estilização do componente login 
acesse: https://bit.ly/2DLnAev. 
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Finalizamos a construção do componente login. Falta definir 
uma rota para aplicação iniciar o projeto na página de login. 


Encontre o arquivo app-routing.module.ts na pasta app. 
Na classe AppRoutingModule definimos as rotas da aplicação. No 
array de rotas routes: Routes , vamos definir dois path : 
routes: Routes = [ 

{ path: '', redirectTo: 'login', pathMatch: 'full' 3, 
{ path: 'login', component: LoginComponent 3, 

O primeiro path é um alias para indicar quando o usuário 
navega na raiz da url, sem passar nenhuma informação. É o 
endereço que o aparece quando executamos a aplicação com o 
comando ng serve -o. 


No segundo caminho nomeamos a rota como 'login' e 
vinculamos ao componente LoginComponent . 


Nesse momento já temos o login funcional. Porém, ao executar 
o projeto ( ng serve --o ) e inserir o e-mail e a senha criados no 
capítulo do Firebase (cap. 3), o console da página mostrará um 
erro, já que redirecionamos para uma rota na classe do 
componente: 


this.router.navigate(['/admin/painel']) 


O caminho /admin/painel ainda não existe! 


Agora podemos criar o menu que ficará disponível em toda 
aplicação. 
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No final da seção teremos o seguinte componente: 
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Y=Requisições APainel 





Figura 5.5: Menu da aplicação 


Para isso, vamos começar gerando o componente no terminal 
utilizando o comando: 


ng g c components/admin/menu 


Para que ele apareça em toda a aplicação, devemos incluir o 
seletor do componente <app-menu></app-menu> no componente 
principalem app.component .html. 
<div class="col-1g-12 py-3"> 

<app-menu></app-menu> 
</div> 
<div class="bg-color"> 

<router -outlet></router -outlet> 
</div> 

Esse nome está no selector da classe do componente 
( components/admin/menu/menu. component .ts ). 


A diretiva router-outlet marca o local em que o roteador 
exibe os componentes dinamicamente. 


Abrindo a classe do componente, vamos declarar um objeto 
user e injetar duas classes no construtor: 
user: Observable<firebase.User>; 


constructor (private authServ: AuthenticationService, private ro 
uter: Router) { } 


Com o objeto, monitoramos o estado da autenticação e no 
método construtor, criamos dois objetos que serão utilizados para 
implementar os métodos a seguir. 
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Começaremos com ngOnInit() , que é um dos métodos do 
ciclo de vida do framework que inicializa o componente após o 
Angular exibir primeiro as propriedades vinculadas a dados e 
definir as propriedades de entrada da diretiva ou componentes. 


Vamos utilizar com frequência esse método para inicializar os 
objetos e invocações de métodos. 


Nosso objetivo é monitorar o estado da autenticação: 


ngOnInit() { 
this.user = this.authServ.authUser(); 


} 


Dessa forma, conseguimos monitorar o objeto user , pois a 
função authUser() retorna um Observable do usuário no 
Firebase. 


Agora, podemos codificar uma função para encerrar a sessão. 
Fazemos isso com o código: 


sair() { 
this.authServ.logout().then(() => this.router.navigate(['/']) 
); 
} 
Invocamos o método logout() do serviço injetado no 
construtor e na realização da Promise then() => , navegamos até 


arotaraiz navigate(['/']) ,redirecionando para o login. 


Desenvolvendo agora o código do template, disponível em 
https://bit.ly/2]76awB, vale destacar o seguinte trecho do código: 
<li class="nav-item" routerLinkActive="active"> 
<a class="nav-link" routerLink="/" href="#"> 


<i class="fas fa-home"></i>Painel</a> 
</li> 
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routerLink é o local onde especificamos as rotas da 
aplicação, sempre iniciando com / . Em routerLinkactive 
definimos uma classe CSS para quando o link da rota se tornar 
ativo. 


Parao botão sair , fazemos um event binding em: 
<a href="g" (click)="sair()" class="nav-link">SAIR</a> 


Ao servir a aplicação ( ng serve --o ), você tem o seguinte 
resultado: 


f=Requisições Painel &uncionários 





v= 


THE sistema de Requisições 


Email 


Informe o Email 
Email é obrigatório 


Senha 


Figura 5.6: Login, aparecendo o menu 


Observe que a tela do login já exibe o menu com links para 
outros componentes, o que não faz muito sentido! Vamos 
controlar a exibição do componente utilizando a diretiva *ngIf. 


No início do template: 
<nav *ngIf="(user |async)?.uid" 


Verificamos dentro da tag que renderiza o menu de navegação 
se existe a propriedade uid do objeto user . Como é do tipo 
Observable, devemos usar o pipe (o sinal de barra de pé | )ea 
palavra async 
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PIPE 


Um pipe recebe dados como entrada e os transforma em uma 


saída desejada. Podemos criar um pipe personalizado. 





Nas próximas implementações de componentes mostrarei uma 
abordagem na construção com vistas a projetos de médio e grande 
portes. 


5.4 PAINEL ADMINISTRATIVO - 
COMPONENTES COM LAZY LOADING 


Os primeiros componentes que implementamos, login e menu, 
foram adicionados ao módulo principal. Conforme nossa aplicação 
aumenta, essa forma não é uma prática recomendada, já que todos 
os componentes são carregados na inicialização. 


Assim, vamos trabalhar com o conceito de Lazy Loading, 
dividindo nossa aplicação em módulos, que serão carregados 
somente quando houver necessidade, isto é, quando o usuário 
navegar até a rota daquele módulo. 


Entre outras vantagens podemos citar o impacto do tempo de 
carregamento do projeto. 


Para utilizar a técnica devemos realizar os seguintes 
procedimentos: 


1. Criar o módulo usando ng g module nome-do-modulo ; 
2. Criar o componente ng g c nome-do-componente ; 
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3. Configurar a rota. 


Faremos isso para o componente painel. No terminal, informe 
o comando: 


ng g m components/admin/painel --routing 


Utilizamos o Angular CLI com ng g para gerar um módulo 
com o comando abreviado m nas pastas components/admin e 
nomeamos o módulo como painel. 


A flag --routing cria um arquivo de rotas do componente 
chamado painel-routing.module.ts. 


Agora, criaremos o componente. No terminal: 
ng g c components/admin/painel 


Trocamoso m por c , gerando um componente. 


A estrutura da pasta painel contém 5 arquivos: 


4 painel 
painel-routing.module.ts 
painel.component.css 


painel.component.html 


painel.component.ts 


painel.module.ts 





Figura 5.7: Estrutura da pasta painel 


Agora, podemos abrir arquivo principal de rotas, app- 
routing.module.ts , na pasta app e incluir uma rota no array. 


{ path: 'admin/painel', loadChildren: () => import('./component 
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s/admin/painel/painel.module') 
.then(m => m.PainelModule), canActivate: [AuthguardService]), 


Definimos o path como admin/painel , exatamente como 
fizemos na implementação do método login. A diferença agora é 
que não associamos a rota ao componente, mas ao módulo, 
utilizando a propriedade loadChildren em .then(m => 


m.PainelModule) . 


Note que a sintaxe usa loadChildren seguida por uma 
função que usa a sintaxe de importação integrada (...) do 
navegador para importações dinâmicas. O caminho de importação 
é o caminho relativo para o módulo. 


Vale destacar que esse recurso é uma nova forma de configurar 
rotas utilizando lazy, introduzida a partir na versão 8. 


IMPORTAÇÕES DINÂMICAS 


A importação dinâmica é útil em situações em que você 
deseja carregar um módulo condicionalmente ou sob 
demanda. Além disso, essa forma melhora o suporte de 


editores que podem entender e validar as importações. 





Desta forma, o roteador sabe ir ao módulo do recurso. Os 
módulos é que ficarão responsáveis pelo carregamento dos 
componentes. 
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5.5 PROTEGENDO AS ROTAS COM GUARDAS 


O objetivo desta seção é apresentar uma estratégia para 
proteger as rotas. 


Da forma como implementamos até aqui, o usuário consegue 
acessar qualquer página (componente) informando diretamente a 
rota na url, sem estar logado. 


Vamos criar um serviço que verifica se o funcionário está 
autenticado. No terminal, informe: 


ng g s services/authguard 


Abrindo o arquivo  authguard.service.ts da pasta 
services , vamos implementar a interface Canactivate , 
importando de QGangular/router . 


Essa interface auxilia no gerenciamento da navegação, 
decidindo se uma rota pode ser ativada. 


import ( CanActivate) from 'QGangular/router'; 
export class AuthguardService implements CanActivate( 


Realizamos a injeção de duas classes para redirecionar a 
navegação ( Router ) e observamos o estado da autenticação com 
AngularFireAuth : 


constructor (private afAuth: AngularFireAuth, private router: Rout 


er) ts 


Vamos implementar o método canactivate , retornando 
false se não existir um usuário, e redirecionando a navegação 
paraarota /login. 


canActivate(route: ActivatedRouteSnapshot, state: RouterStateSn 
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apshot) { 
return this.afAuth.authState.pipe( 

take(1), 

map(user => !!user), 

tap(loggedIn => { 
if (!loggedIn) { 

this.router.navigate(['/login']); 

3 

3) 


Para finalizar, devemos registrar no arquivo de rotas quais 
delas serão protegidas. Editamos o arquivo app- 
routing.module.ts , informando a propriedade canActivate , 
dessa maneira: 

{ path: 'login', component: LoginComponent 3, 
{ path: 'admin/painel', loadChildren: () => import('./component 
s/admin/painel/painel.module'") 
.then(m => m, PainelModule), canActivate: [AuthguardService]), 

No path inicial alteramos para admin/painel e na frente do 
módulo do painel informamos canActivate: 
[AuthguardService] , passando nossa implementação da guarda. 


Assim, ao subir aplicação, se o usuário já estiver logado, a url 
raiz será a do componente painel. Caso contrário, o método 
retorna false , redirecionando para a rota do componente login. 


Conforme aumenta a complexidade da aplicação, uma prática 
recomendada é criar módulos compartilhados. 


Portanto, o próximo passo é arranjar os artefatos que 
utilizaremos com certa frequência, como os componentes da 
biblioteca PrimeNG e outras classes em módulos, visando a 
organização do projeto e agilidade no código. 
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5.6 ORGANIZANDO E COMPARTILHANDO 
MÓDULOS 


Vamos criar um módulo que vai expor os componentes do 
PrimeNG. 


No terminal, informe o comando: 


ng g m modules/primeNG 
Na pasta modules edite o arquivo primeng.module.ts. 


import ( NgModule ) from 'Qangular/core'; 

import { CommonModule 3 from 'QGangular/common'; 
import ( ButtonModule } from 'primeng/button'"; 
import ( FieldsetModule } from 'primeng/fieldset'; 


// Alguns imports 
(QNgModule( 1 
imports: [ 
CommonModule, ButtonModule, FieldsetModule, InputMaskModule, Mes 
sagesModule, CheckboxModule , 
DataTableModule, DialogModule, Input TextModule, InputTextareaMod 
ule, DropdownModule, 
ConfirmDialogModule, CalendarModule, TabViewModule, ToggleButto 
nModule 
Jy 
exports: [ 
ButtonModule, FieldsetModule, InputMaskModule, MessagesModule, 
CheckboxModule , 
DataTableModule, DialogModule, Input TextModule, InputTextareaMod 
ule, DropdownModule, 
ConfirmDialogModule, CalendarModule, TabViewModule, ToggleButto 
nModule 


l; 


declarations: [] 


}) 


export class PrimeNGModule { } 


Realizamos os imports dos componentes que utilizaremos no 
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decorrer do desenvolvimento dos componentes. O link da classe 
com todos os imports está em https://bit.ly/39Y luG;. 


Logo em seguida, registramos nos arrays de imports e 
exports os módulos dos componentes. 


Agora, podemos gerar também mais um módulo mais genérico 
para centralizar os imports dos componentes: 


ng g m modules/comum 


Ainda na pasta modules , agora temos o arquivo 
comum.module.ts . Vamos incluir os seguintes módulos no array 


de imports e exports : 


(QNgModule( 
imports: [ 
CommonModule, 
FormsModule, 
PrimeNGModule 


J, 

exports: [ 
CommonModule, 
FormsModule, 
PrimeNGModule 


l; 


Declaramos o CommonModule que fornece as diretivas básicas 
do framework como *ngIf e *ngFor , o módulo para trabalhar 
com formulários FormsModule œe o módulo que criamos 
anteriormente PrimeNGModule . 


Link para o código completo do módulo: 
https://bit.ly/2WbYxvs. 


Já temos o essencial para construir componentes mais 
complexos, com reutilização de código e mais organização do 
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projeto. 


Continuando o desenvolvimento, no próximo capítulo vamos 
implementar o componente responsável pela gerência de 
departamentos. 
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CarírtuLo 6 


FORMULÁRIOS REATIVOS 
E PIPE - DEPARTAMENTO 
E FUNCIONÁRIO 


Neste capítulo vamos trabalhar com formulários reativos, 
pontuando as vantagens dessa abordagem e ganhos em relação à 
perspectiva anterior. 


Utilizaremos essa abordagem para implementar o requisito 
Cadastrar Departamento. 


Finalmente, finalizaremos o capítulo com as seções sobre o 
componente para o Funcionário. Implementaremos um tipo 
especial de classe, pipe, que nos auxiliará na visualização filtrada 
dos registros. 


6.1 COMPONENTE DEPARTAMENTO 


Para o próximo componente, vamos gerar o módulo e depois o 
componente, utilizando Lazy Loading. 


No terminal, informamos os comandos (depois de cada linha 
pressione enter ): 
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ng g m components/admin/departamento --routing 
ng g c components/admin/departamento 


Seguimos incluindo uma rota para o departamento em app- 
routing.module.ts : 
{ path: 'admin/departamento!", loadChildren: () => import('./com 


ponents/admin/departamento/departamento.module") 
.then(m => m.DepartamentoModule), canActivate: [AuthguardServic 


els, 


Observe que declaramos a guarda na propriedade 
canaActivate: [AuthguardService]. 


Escrevemos a rota no template do componente menu 
( 1ogin.component .html ): 


<a class="nav-link" routerLink="/admin/departamento" href="#"> 


E no módulo do departamento ( departamento- 
routing.module.ts ) associamos o path ao componente. 


const routes: Routes = [ 
{ path: '', component: DepartamentoComponent 3 


]; 


Com a geração e a configuração do componente, podemos 
iniciar a codificação da classe. 


No final da seção, teremos o componente com o seguinte 
visual: 
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f=Requisições Painel &tFuncionários equisições gı Departamentos 





Departamentos ( © ) 


wo 


Nome Telefone Ações 


TI (11)1111-1111 o O 
CONTAS (55)5555-5555 © (=) 
CONTABILIDADE (55)5555-5555 [2] (=) 


Q Voltar 


Figura 6.1: Componente Departamento 


Essa interface será o padrão de layout adotado durante todo o 
projeto para atender os requisitos do case proposto. 


Neste capítulo, veremos outra abordagem para formulários, 
conhecida como formulários reativos (Reactive Forms). 


Formulários reativos 


Formulários reativos são uma boa opção, pois apesar da lógica 
de validação mais complexa é realmente mais simples de 
implementar, com o ganho de podermos testar a lógica de 
validação de formulário. 
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REACTIVES FORMS VS. TEMPLATE DRIVEN 


As duas abordagens possuem vantagens, mas em geral, é 
melhor escolher uma das duas formas de fazer formulários e 


usá-las consistentemente em todo o aplicativo. 





O primeiro passo é importar e registrar o módulo 


ReactiveFormsModule em departamento.module.ts. 


(QNgModule( 
declarations: [DepartamentoComponent], 
imports: [ 
SharedModule, 
ReactiveFormsModule, 
DepartamentoRoutingModule 


] 


Realizamos também a declaração de SharedModule . Esse, por 
sua vez, exporta outros módulos necessários ao componente, como 
os módulos de cada componente visual do PrimeNG que 
utilizaremos no decorrer do desenvolvimento. 


Na classe do componente ( departamento.component.ts ), 
declaramos 4 atributos para criar a tabela, formulário e ações. 
departamentos$: Observable<Departamento[]>; 
edit: boolean; 
displayDialogDepartamento: boolean; 
form: FormGroup; 

Em departamentos$ , temos um objeto do tipo 
Observable<Departamento[]> que usaremos para apresentar os 
registros salvos no Firebase. O uso de $ no nome é uma 
convenção para identificar objetos que utilizam operações 
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assíncronas. 


Na variável edit , controlamos o modo de inclusão ou edição 
para apresentar a legenda correta no botão. Já a propriedade 
displayDialogDepartamento , também booleana, representa a 
visibilidade de um componente dialog que codificaremos no 
template. 


Por fim, a variável form representa a instância de 
componentes do formulário. 


Seguindo o código: 


constructor(private departamentoService: DepartamentoService, pr 
ivate fb: FormBuilder) ( 3 


Temos a injeção do serviço de departamento 

departamentoService e a classe FormBuilder , que nos 

permite criar formulários complexos sem a necessidade de vários 
controles. 


Para definir os campos do formulário e configurar as regras de 
validação, escrevemos o método configForm() : 
configForm() { 
this.form = this.fb.group(f 
id: new FormControl(), 


nome: new FormControl('', Validators.required), 
telefone: new FormControl('') 


3) 
} 

Através do método group , criamos uma instância do 
formulário, passando uma coleção de FormControl para cada 
atributo. No construtor do atributo nome , passamos uma 
validação, informando o preenchimento obrigatório do campo em 
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Validators.required. 


No endereço https://angular.io/api/forms/Validators, 
encontramos uma relação dos tipos de regras já definidas como 
máximo, mínimo, ou ainda, podemos definir nossas próprias 
regras. 


Na sequência, declaramos o método na inicialização, em 
ngonInit(): 
ngOnInit() { 


this.departamentos$ = this.departamentoService.list() 
this.configForm() 


J 


Preenchemos o campo departamentos$ , invocando o 
método list() do serviço. 


A seguir, vamos criar o método que aciona o dialog para 
incluirmos um departamento: 
add() { 

this.form.reset() 

this.edit = false; 


this.displayDialogDepartamento = true; 


3 


Com form.reset() reiniciamos o estado do formulário de 
todos os campos para nulo. 


Setamos o atributo edit para false , indicando que não 
estamos em edição, e true para displayDialogDepartamento , 
exibindo o componente que possuirá essa propriedade. 


O próximo método é responsável pela seleção do objeto na 
tabela. 


selecionaDepartamento(depto: Departamento) { 
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this.edit = true; 
this.displayDialogDepartamento = true; 
this.form.setValue(depto) 


} 


Passamos no parâmetro da função o objeto selecionado, 

depto: Departamento , a partir do template. Mudamos para o 

modo de edição com this.edit = true e exibimos o dialog com 
this.displayDialogDepartamento = true;. 


Finalmente, passamos o objeto para o formulário através do 
método setValue(depto). 


Para persistir os dados do formulário, implementaremos o 
método save() : 


save() { 
this.departamentoService.createOrUpdate(this.form.value) 
«then(() => { 

this.displayDialogDepartamento = false; 

Swal.fire( Departamento $(!this.edit ? 'salvo' : 'atualizado'3 
com sucesso.', '', 'success'))) 
.catch( (erro) => { 

this.displayDialogDepartamento = false; 


Swal.fire( Erro ao $(!this.edit ? 'salvo' : 'atualizado') o depa 
rtamento.”, "Detalhes: S$ferro)', 'error') 3) 

this.form.reset() 
3 


Explicando o código, passamos o formulário para o método do 
serviço que cria ou atualiza os dados do formulário: 
createorUpdate(this.form.value) , lembrando que a regra 
para descobrir quando é cada ação, inserção ou atualização, baseia- 
se na existência de um valor para o id, explicada no capítulo de 
serviços. 


No then(() =>) da Promise, escondemos o dialog com 
this.displayDialogDepartamento = false e exibimos uma 
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mensagem de alert com a biblioteca SweetAlert2 no método 
Swal.fire . Esse método recebe um título, uma mensagem e um 
tipo success. 


Aqui vale a menção do uso de template string S$(váriavel) 
para concatenar a mensagem, além de usarmos o operador 
ternário ? para exibir a mensagem verificando o modo do 
formulário, dessa forma: 


$(!this.edit ? 'salvo' : 'atualizado') 


Em caso de erro, capturamos com catch e exibimos como 
detalhes usando $ferro) ,e o tipo do dialog para error. 


Por fim, escrevemos o código para excluir um departamento: 


delete(depto: Departamento) { 
Swal.fire(f 
title: 'Confirma a exclusão do departamento?", 
text: ""; 
icon: 'warning', 
showCancelButton: true, 
confirmButtonText: 'Sim', 
cancelButtonText: 'Não' 
)).then((result) => { 
if (result.value) { 
this.departamentoService.delete(depto.id) 
«then(() => { 
Swal.fire('Departamento excluído com sucesso!', '', 's 
uccess'") 
3) 
} 
3) 
} 


No começo do método temos a configuração das propriedades 
para exibir uma mensagem de confirmação, antes de efetivar a 
exclusão. 
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Informamos os rótulos para o botão de confirmação, 
confirmButtonText: 'Sim' » e cancelamento, 


cancelButtonText: 'Não!. 


Em seguida, verificamos na Promise o resultado do click if 
(result. value) e invocamos o método do serviço, passando o id 
do departamento, departamentoService.delete(depto.id) 
Concluímos com a mensagem "Departamento excluído com 


sucesso!. 


E assim, temos a lógica do componente departamento 
implementada. O código completo está disponível em 
https://bit.ly/2VFdloo. 


Vamos codificar o template no html correspondente. 


6.2 TEMPLATE DO DEPARTAMENTO `- 
RECUPERANDO E EXIBINDO INFORMAÇÕES 


Vamos começar o código em 
departamento.component.html definindo um cabeçalho com 
um botão para acionar um novo registro: 


<div class="card-header"> 
<h3> Departamentos 
<button type="button" style="margin-right: opx" (click)="a 
dd()" class="text-right btn btn-outline-info btn-lg"> 
<i class="fa fa-plus-circle" aria-hidden="true"></i> 
</button> 
</h3> 
</div> 


Usamos a classe card-header do Bootstrap para estilizar o 
cabeçalho. E associamos o click botão ao método add() 
desenvolvido na classe do componente. 
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Departamentos (6) 


Figura 6.2: Cabeçalho Departamento 


A seguir, codificamos a tabela: 


<table class="table table-striped table-hover table-bordered col 
-centered"> 
<thead class="thead-dark"> 
<tr> 
<th class="text-center">Nome</th> 
<th class="text-center">Telefone</th> 
<th class="text-center">Ações</th> 
</tr> 
</thead> 
<tbody> 
<tr *ngFor="let departamento of departamentos$ | async"> 
<td class="text-center">((departamento.nomeJI</td> 
<td class="text-center">((departamento. telefoneJI</td> 
<td class="text-center"> 
<button type="button" (click)="selecionaDepartamento 
(departamento)" class="btn btn-success "> 
<i class="fas fa-edit"></i> 
</button> 
<button type="button" (click)="delete(departamento)" 
class="btn btn-danger "> 
<i class="fas fa-trash"></i> 
</button> 
</td> 
</tr> 
</tbody> 
</table> 


Definimos as colunas Nome, Telefone e ações e, na tag 
<tr> , utilizamos a diretiva *ngFor para criar cada linha da 
tabela. Nomeamos cada objeto como departamento e usamos o 
operador | async para iterar sobre departamento$ . 


Na terceira célula, criamos dois botões. O primeiro é 
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responsável pela edição.  Vinculamos ao método 
selecionaDepartamento(departamento) e mostramos um 
ícone da biblioteca FontAwesome , fas fa-edit. 


O segundo botão, vinculamos à função de excluir 
delete(departamento) , também implementada na classe, 
passando a variável departamento no parâmetro. 


A imagem a seguir apresenta o resultado do click no botão de 
exclusão: 


Confirma a exclusão do 
departamento? 


EE 





Figura 6.3: Dialog para exclusão do departamento 


Codificamos também um botão para navegar até o painel. 


<a [routerLink]="['/admin/painel']" class="btn btn-primary "> 
<i class="fa fa-search" aria-hidden="true"></i> Voltar</a> 


Figura 6.4: Botão voltar 
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Usamos as classes btn e btn-primary para estilizar o link, 
passando arotaem [routerLink]="['/admin/painel'7". 


Continuando a codificação no template do componente 
departamento , vamos escrever o dialog com o formulário para 
capturar os dados, tanto para inclusão como edição dos 
departamentos. 


No trecho a seguir está o início dessa implementação: 


<p-dialog header="Dados do departamento" [style]="( width: '8ovw 
' }" [contentStyle]="('overflow':'visible')" [(visible)]="displ 
ayDialogDepartamento" [responsive]="true" [modal]="true"> 
<div class="ui-grid ui-grid-responsive ui-fluid" *ngIf="form.va 
lue"> 
Com a tag <p-dialog iniciamos a implementação do dialog, 
informando algumas propriedades relacionadas ao tipo modal, 


que se comporta com responsividade responsive . 


Atribuímos a variável displayDialogDepartamento à 
propriedade [(visible)] que declaramos na classe. 


Na próxima div controlamos a exibição com a diretiva 
condicional *ngIf para evitar erros na renderização dos 
componentes. 


Em seguida, escrevemos o formulário: 


<form [formGroup]="form" class="p-fluid p-formgrid p-grid"> 
<div class="p-field p-col-12 p-md-6"> 
<label for="nome">Nome*:</label> 
<input type="text" pInputText formControlName="nome" /> 
</div> 


<div class="p-field p-col-12 p-md-6"> 
<label for="telefone">Telefone:</label> 
<p-inputMask formControlName="telefone" mask="(99)9999-99 
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99"></p-inputMask> 
</div> 
</form> 
Associamos o formulário ao FormGroup da classe com 
[formGroup]="form" , em seguida, definimos o rótulo e o input, 
estilizando com as classes p-field, p-col-12 e p-md-6 da 





biblioteca PrimeNg. 
Dados do departamento x 
Nome*: TI 
Telefone: 





Figura 6.5: Formulário de departamentos 


Conectamos os campos do formulário no template 
formControlName com os valores já definidos na classe, como 


nome e telefone. 


Para o campo telefone, utilizamos um input personalizado, p- 
inputMask , onde registramos uma máscara mask="(99)9999- 
9999" na entrada de valores. 


Finalmente, definimos um botão para salvar ou atualizar o 
registro: 
<button [disabled]="!form.valid" type="button" class="btn btn-pr 


imary" (click)="save()"> 
<i class="fas fa-check-circle"></i> {{edit ? 'Atualizar' : 'Sal 
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var'}} 
</button> 


O botão fica disponível somente se o estado do formulário for 
válido [disabled]="!form.valid". 


Dados do departamento x 
Nome*: | 


Telefone: 


Figura 6.6: Campo com preenchimento obrigatório 


Vinculamos ao evento click o método que persiste ou altera 
as informações em save() . A exibição do rótulo do botão 
também verifica em qual modo o formulário se encontra, {{edit 


? 'Atualizar' : 'Salvar'}}. 


Com o preenchimento do campo obrigatório, temos a 
confirmação da operação no Firebase. 


6.2 TEMPLATE DO DEPARTAMENTO - RECUPERANDO E EXIBINDO 
INFORMAÇÕES 85 


Ná 


Departamento salvo com sucesso. 
Ea 


Figura 6.7: Confirmação do departamento salvo 





No arquivo de  estilização dos componentes 
departamento.component .css , codificamos assim: 
label { 


font-weight: bold; 
3 


«btn { 
margin: 5px; 
} 
No arquivo de estilização negritamos os labels . 


Por fim, especificamos uma margem de 5 pixels para a classe 
btn , utilizada nos botões da tabela. 


Após a inclusão de registro é possível visualizar no console do 
Firebase https://console.firebase.google.com a estrutura criada: 
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h > departamentos > C8LZJIO4giY47r... 


A requisicoes-app | departamentos T E C8LzJio4giY47rrqDtwz 
+ Adicionar coleção + Adicionar documento + Adicionar coleção 


departamentos > C8LZJiB4giY47rraDtwz > + Adicionar campo 


C8LZJiIO4giY47rrqDtwz' 
e: "TI 


telefone: "(11)1111-1111" 


Figura 6.8: Coleção de documentos no Firebase 


No primeiro painel à esquerda, temos a coleção 

departamentos . O painel central apresenta os documentos 

identificados pela chave. E finalmente, no painel da direita, os 
dados armazenados para os campos id, nome e telefone . 


Assim, finalizamos o desenvolvimento do requisito Cadastrar 
Departamento. Abordamos questões de requisitos não funcionais 
com o uso de Lazy Loading além de diferentes formas para 


trabalhar com formulários. 


6.3 REQUISITO CADASTRAR FUNCIONÁRIO 


Continuando o desenvolvimento da aplicação, vamos 
implementar o requisito Cadastrar Funcionário. Esse possui 
algumas particularidades em relação ao requisito anterior. 


No final da seção teremos o componente: 


6.3 REQUISITO CADASTRAR FUNCIONÁRIO 87 


Funcionários (o) 


TODOS X 


Nome Email Departamento Função Ações 


Kheronn Machado kheronn@email.com TI Programador B (=) 
Cael Munhoz Machado cael.machado@email.com CONTABILIDADE Contador B a) 
Khaike Machado khaikek@email.com CONTAS Controlador [2] (a) 


Figura 6.9: Componente funcionario 


Começamos gerando o módulo e o componente do 
funcionário, digitando no terminal os comandos: 
ng g m components/admin/funcionario --routing 
ng g c components/admin/funcionario 

Assim como no departamento, a mesma estrutura de pasta e 


arquivos foi gerada. Antes de codificar as classes, vamos utilizar 
um componente para exibir um combo dos departamentos. 


Ainda no terminal, informe: 
npm install --save @ng-select/ng-select 


Esse componente fornece várias propriedades e métodos que 
facilitam as operações com campos do tipo dropdowns. Para 
configurá-lo, devemos registrar seu módulo e definir uma 
configuração de estilos. 


No módulo do componente funcionário 
( funcionario.module.ts ), registramos o módulo e os outros 
módulos comuns que já deixamos organizados: 


88 6.3 REQUISITO CADASTRAR FUNCIONÁRIO 


import { ComumModule } from './../../../modules/comum.module'; 
import ( NgModule ) from 'Qangular/core'; 

import ( NgSelectModule } from '(Qng-select/ng-select'"; 

import ( FuncionarioRoutingModule 3 from './funcionario-routing.m 
odule'; 

import { FuncionarioComponent } from './funcionario.component'; 


@NgModule({ 
declarations: [FuncionarioComponent], 
imports: [ 
ComumModule, 
FuncionarioRoutingModule, 
NgSelectModule 


] 
}) 


export class FuncionarioModule { } 


Temos a declaração de todos os imports e a declaração no array 
de imports nos módulos, assim como no componente anterior. 
Porém, desta vez, registramos o módulo NgSelectModule para 
utilizarmos o componente instalado. 


No arquivo de estilos styles.css , localizado na raiz do 
projeto, adicionamos a linha: 


@import "-Qng-select/ng-select/themes/default.theme.css"; 


Sem essa adição não há exibição do componente. Com isso, 
temos a configuração do componente da biblioteca completa. 


O próximo passo é associar um path ao componente no 


arquivo de rotas funcionario-routing.module.ts. 
{path:'', component: FuncionarioComponent} 


E no arquivo de rotas da aplicação app-routing.module.ts , 
adicionamoso path para funcionário: 


{ path: 'admin/funcionario', loadChildren: () => import('./comp 
onents/admin/funcionario/funcionario.module') 
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.then(m => m.FuncionarioModule), canActivate: [AuthguardService 


13, 


Novamente, iniciamos a codificação mais densa pela classe dos 
componentes funcionario.component .ts , definindo atributos e 
métodos: 


export class FuncionarioComponent implements OnInit { 


funcionarios$: Observable<Funcionario[]>; 
departamentos$: Observable<Departamento[]>; 
departamentoFiltro: string; 

edit: boolean; 

displayDialogFuncionario: boolean; 

form: FormGroup; 


Logo abaixo da assinatura da classe Funcionariocomponent , 


com exceção de departamentos$ e departamentoFiltro , 
temos os mesmos objetos do componente departamento. 


O que vai mudar na implementação será a necessidade de 
exibirmos todos os departamentos para o usuário alocar o 
funcionário. Além disso, vamos desenvolver um filtro na tabela 
por departamento, daí a necessidade de controlar o valor do filtro 


em departamentoFiltro. 


Continuando o código: 


constructor (private funcionarioService: FuncionarioService, priv 
ate departamentoService: DepartamentoService, private fb: FormBui 
lder) { 3 


ngonInit() { 
this.funcionarios$ = this.funcionarioService.list(); 
this.departamentos$ = this.departamentoService.list(); 
this.departamentoFiltro = 'TODOS' 
this.configForm(); 
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Injetamos no construtor os dois serviços 
FuncionarioService e DepartamentoService , além da classe 
que já utilizamos para o formulário FormBuilder . 


Em ngonInit , carregamos ambos funcionários e 
departamentos dos serviços de list() , para exibir no template. 
Também definimos um valor de inicialização para o filtro como 

TODOS . Posteriormente, na implementação do filtro, isso indicará 
para exibir os funcionários de todos os departamentos. 


Também chamamos o método configForm() : 


configForm() { 
this.form = this.fb.group(f 
id: new FormControl(), 


nome: new FormControl('', Validators.required), 
email: new FormControl('', [Validators.required, Validators 
.email]), 
funcao: new FormControl(''), 
departamento: new FormControl('', Validators.required) 
3) 


} 


Declaramos os campos id, nome, email, funcao e 
departamento para o objeto que representa o formulário, 
instanciando o respectivo controle e validações. 


Destaco a possibilidade de informar mais de uma validação, 
como em [Validators.required, Validators.email] para o 
e-mail. 


O restante da implementação é igual ao que já fizemos com o 
componente departamento, não sendo necessário dar mais 
detalhes ou explicações. 


Para ver o código completo da classe do funcionário, acesse 
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https://bit.ly/2HkY W5]. 


6.4 PIPE - FILTRANDO OS REGISTROS DE 
FUNCIONÁRIOS 


Antes de codificar o template do componente funcionário, 
vamos gerar um pipe para filtrar os registros com base na seleção 
de um combo de departamentos. 


Para isso, utilizamos novamente o Angular CLI. No terminal, 
informe: 


ng g pipe pipes/filter-departamento 


Foi gerada uma pasta pipes e um arquivo filter- 
departamento. pipe.ts . No código da classe temos inicialmente: 


import ( Pipe, PipeTransform ) from 'Qangular/core'; 
@Pipe({ 


name: 'filter' 


}) 


export class FilterDepartamentoPipe implements PipeTransform { 


Temos a diretiva @Pipe informando que a classe é um pipe e 
um atributo name para informar no template. 


A classe implementa a interface PipeTransform , que tem o 
método transform . Vamos codificá-lo a seguir: 


transform(value: any, filtro: any): any { 


if (filtro == 'TODOS!') return value; 
if (value) { 
return value. filter(elem => (elem.departamento.nome === fil 
tro)) 
} 


} 
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O primeiro parâmetro value representa o array que será o 
valor original. Nesse caso, a lista de funcionários. O segundo 
parâmetro filtro será o departamento no qual queremos ver os 
registros de funcionários. 


No primeiro if , verificamos se o valor TODOS e retornamos 
a lista sem filtro. No segundo if , verificamos se existe uma lista 
value e, em seguida, invocamos o método filter comparando 
cada nome do objeto departamento com o valor do filtro 
elem.departamento.nome === filtro. 


Com o pipe, já podemos desenvolver o template. Abrindo o 
código em funcionario.component . html , temos inicialmente: 


<div class="card-header"> 
<h3> Funcionários 
<button type="button" style="margin-right: opx" (click)="a 
dd()" class="text-right btn btn-outline-info btn-1g"> 
<i class="fa fa-plus-circle" aria-hidden="true"></i> 
</button> 
</h3> 
<ng-select [(ngModel)]="departamentoFiltro"> 
<ng-option [value]="'TODOS'">TODOS</ng-option> 
<ng-option *ngFor="let departamento of departamentos$ | as 
ync" [value]="departamento.nome">((departamento.nome)) 
</ng-option> 
</ng-select> 


Seguindo nosso padrão de layout, temos um título com o botão 
para chamar a função  add() , igual ao componente 
departamento . 


A seguir, temos o código do componente responsável pelo 
combo <ng-select , que exibirá todos os departamentos 
selecionados pelo atributo departamentoFiltro. 


Adicionamos uma opção <ng-option com o primeiro valor 


6.4 PIPE - FILTRANDO OS REGISTROS DE FUNCIONÁRIOS 93 


fixo para TODOS . No segundo ng-option fazemos uma 
interação *ngFor="let departamento of departamentos$ | 
async" setando tanto o valor quanto o rótulo para 


departamento .nome . 


Funcionários (©) 


FoDOS 
TODOS 

TI 

RH 
COMPRAS 


Figura 6.10: Combo departamentos 


Seguindo, temos o código para a tabela de funcionários: 


<table class="table table-striped table-hover table-bordered col- 
centered"> 
<thead class="thead-dark"> 
<tr> 

<th class="text-center">Nome</th> 

<th class="text-center">Email</th> 

<th class="text-center">Departamento</th> 

<th class="text-center">Função</th> 

<th class="text-center">Ações</th> 


</tr> 
</thead> 
<tbody> 
<tr *ngFor="let funcionario of funcionarios$ | async | f 
ilter : departamentoFiltro"> 


<td class="text-center">((funcionario.nomeJJ</td> 
<td class="text-center">((funcionario.emailji</td> 
<td class="text-center">((funcionario.departamento.nom 
e}}</td> 
<td class="text-center">{{funcionario.funcao}}</td> 
<td class="text-center"> 
<button type="button" (click)="selecionaFuncionario( 
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funcionario)" class="btn btn-success "> 
<i class="fas fa-edit"></i> 
</button> 
<button type="button" (click)="delete(funcionario)" 
class="btn btn-danger "> 
<i class="fas fa-trash"></i> 
</button> 
</td> 
</tr> 
</tbody> 
</table> 


Temos as definições de cabeçalho para os campos nome , 
email, departamento e funcao , e para os botões de ações. 


Na linha do ngFor está o pipe para listas assíncronas | 
async eo pipe personalizado que desenvolvemos para filtrar os 
resultados com | filter : departamentoFiltro , indicando o 
parâmetro que será o filtro após os 


A seguir codificamos o dialog que contém o formulário de 
funcionário: 


<p-dialog header="Dados do funcionário" [style]="( width: '80vw' 
}" [contentStyle]="('overflow':'visible'3" 
[(visible)]="displayDialogFuncionario" [responsive]="true" [moda 
]J="true"> 
<div class="ui-grid ui-grid-responsive ui-fluid" *ngIf="form.val 
ue"> 
<form [formGroup]="form" class="p-fluid p-formgrid p-grid"> 
<div class="p-field p-col-12 p-md-6"> 
<label for="nome">Nome*:</label> 
<input type="text" pInputText formControlName="nome" /> 
</div> 


<div class="p-field p-col-12 p-md-6"> 

<label for="email">Email*:</label> 

<input type="text" pInputText formControlName="email" /> 
</div> 


<div class="p-field p-col-12 p-md-6"> 
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<label for="departamento">Departamento*:</label> 
<ng-select [items]="departamentos$ | async" bindLabel="no 
me" formControlName="departamento"> 
</ng-select> 
</div> 


<div class="p-field p-col-12 p-md-6"> 

<label for="funcao">Função:</label> 

<input type="text" pInputText formControlName="funcao" /> 
</div> 


<div class="p-field p-col-12 p-md-6"> 
<label for="foto">Foto:</label> 
<input type="file" ginputFile class="form-control" (chang 
)="upload(S$event)" /> 
<progress style="width: 100%;" max="100" [value]="(upload 
Percent | async)"></progress> 


</div> 
</form> 
</div> 
<div *ngIf="form.controls['nome'].errors || form.controls['emai 
l'J.errors || form.controls['departamento'].errors " 


class="text-warning ">*Preenchimento Obrigatório</div> 
<div class="p-d-flex p-jc-end"> 
<button [disabled]="!form.valid" type="button" class="btn b 
tn-primary " (click)="save()"> 
<i class="fas fa-check-circle"></i> {{edit ? 'Atualizar' 
'Salvar'}} 
</button> 
</div> 
</p-dialog> 
Temos a definição dos campos de entrada nome, email , e 
funcao . Para o departamento, utilizamos novamente o 
componente ng-select , porém, como só precisamos trazer os 
valores do Firebase, conseguimos abreviar a escrita informando o 
atributo da classe com a propriedade [items]="departamentos$ 


| async". 


Também definimos uma mensagem que será exibida com base 
na validação dos campos, usando o operador ngIf eas condições 
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dos campos nome , email e departamento em 
form.controls['nome'].errors || 

form.controls['email'J.errors || 

form.controls['departamento' ].errors. 


O código completo do template está disponível em 
https://bit.ly/2YrRyíN. 


Para finalizar esse requisito, definimos um estilo adicional para 
controlar o estado do formulário. No arquivo 
funcionario.component.css codificamos a seguinte classe: 


.ng-invalid:not(form) { 
background-color: rgb(235, 185, 185); 
) 


Assim, definimos uma cor de fundo para campos que ainda 
não estão validados. O visual do dialog ficou assim: 


Dados do funcionário 
Departamento”: v 


Função: 


*Preenchimento Obrigatório 





Figura 6.11: Dialog funcionário 
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Finalizamos o desenvolvimento do requisito Cadastrar 
Funcionário. Conseguimos explorar outras nuances da validação e 
a construção de pipe na formatação de valores com base em 
condições. 


A seguir, codificaremos o requisito Gerenciar Requisições. 
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CaríTULO 7 


MAIS COMPONENTES - 
REQUISITO GERENCIAR 
REQUISIÇÕES 


Neste capítulo, desenvolveremos o requisito Gerenciar 
Requisições, que consiste em criar funções e telas para que o 
funcionário possa fazer uma requisição e também gerenciar 
movimentações de uma requisição solicitada ao seu departamento. 


Vamos explorar conceitos-chaves do framework como @Input 
e @Output no desenvolvimento de componentes reutilizáveis. 


O capítulo será dividido em três seções. Na primeira, 
desenvolveremos o componente para criar as requisições. Na 
segunda, um componente para dar seguimentos através de 
movimentações da requisição; e no terceiro, um componente para 
visualizar e editar todas as movimentações do requisito. 


No final do capítulo teremos a seguinte composição do 
componente. 
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ZH, 


Minhas Requisições | O ) 


En 


Abertura Última atualização Departamento Status Movimentações Ações 


14/05/2019 10:56 14/05/2019 10:56 CONTABILIDADE Aberto EB (=) 
13/05/2019 16:11 14/05/2019 13:58 TI Processando [2] (=) 
13/05/2019 16:01 14/05/2019 14:03 TI Processando © (=) 


Requisições solicitadas 


Abertura Última atualização Departamento Status Movimentações Ações 


13/05/2019 16:11 14/05/2019 13:58 Ti Processando © 
13/05/2019 16:01 14/05/2019 14:03 TI Processando [0] 
[=] 


Figura 7.1: Gerenciar Requisições 


7.1] MINHAS REQUISIÇÕES 


O primeiro componente será responsável pela inclusão da 
requisição. Assim, devemos escrever uma função que recupere os 
dados do funcionário com base no usuário logado. 


No arquivo de serviços do funcionário, 
funcionario. service.ts , vamos incluir o método: 


getFuncionarioLogado(email: string) { 
return this.firestore.collection<Funcionario>('funcionarios", 
ref => 
ref.where('email', '==', email) 
).valueChanges() 
3 


Passamos o email e, através da referência ref , criamos uma 
consulta na coleção de funcionários em where('email', '==', 
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email). 
Com isso, podemos criar o componente. No terminal, informe: 


ng g m components/admin/requisicao --routing 
ng g c components/admin/requisicao 


Inserimos mais uma rota do módulo em app- 


routing.module.ts : 


{ path: 'admin/requisicao", loadChildren: () => import('./compo 
nents/admin/requisicao/requisicao.module').then(m => m,Requisicao 
Module), canActivate: [AuthguardService]), 


E no menu da aplicação indicamos a rota no link em: 


<li class="nav-item" routerLinkActive="active"> 
<a class="nav-link" routerLink="/admin/requisicao" href="#"> 
<i class="fas fa-calendar -week"></i>Requisições</a> 
</li> 


No módulo de requisição requisicao.module.ts , 
realizamos os imports já conhecidos: 


import ( ComumModule ) from 'src/app/modules/comum.module'; 
import ( NgModule ) from 'Qangular/core'; 

import ( RequisicaoRoutingModule } from './requisicao-routing.mod 
ule'; 

import { RequisicaoComponent } from './requisicao.component'; 
import { NgSelectModule } from '@ng-select/ng-select'; 


@NgModule({ 
declarations: [RequisicaoComponent], 
imports: [ 


ComumModule, 
RequisicaoRoutingModule, 
NgSelectModule 

] 
3) 


export class RequisicaoModule ( 3 


Na classe do componente requisicao.component.ts 
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iniciamos pela declaração dos atributos que utilizaremos: 
export class RequisicaoComponent implements OnInit { 


requisicoes$: Observable<Requisicao[]>; 
departamentos$: Observable<Departamento[]>; 
edit: boolean; 

displayDialogRequisicao: boolean; 

form: FormGroup; 

funcionarioLogado: Funcionario; 


Além dos objetos para inserção e exibição nos componentes, 
vamos precisar consultar o funcionário que está logado, 
funcionarioLogado . Também precisaremos de uma lista de 
departamentos para indicar o destino da requisição usando 


departamentos$ . 


Injetamos as classes de serviços e formulários em: 


constructor(private requisicaoService: RequisicaoService, 
private departamentoService: DepartamentoService, 
private auth: AuthenticationService, 
private funcionarioService: FuncionarioService, 
private fb: FormBuilder) { } 


Incluímos também a classe de autenticação 
AuthenticationService para recuperarmos o usuário 
autenticado. 


A seguir, escrevemos o método para recuperar o funcionário: 


async recuperaFuncionario() { 
await this.auth.authUser() 
.subscribe(dados => { 
this.funcionarioService.getFuncionarioLogado(dados.email) 
.subscribe(funcionarios => { 
this.funcionarioLogado = funcionarios[0]; 
this.requisicoes$ = this.requisicaoService.list() 
.pipe( 
map( (reqs: Requisicao[]) => reqs.filter(r => r.so 
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licitante.email === this.funcionarioLogado.email)) 
) 
3) 
3) 


Chamamos o método getFuncionarioLogado passando o 
email do método authuser . 


Na sequência, recuperamos o usuário na primeira posição do 
array, atribuindo este ao funcionário, em 
this.funcionarioLogado = funcionarios[0]. 


O objetivo é mostrar somente as requisições incluídas pelo 
usuário logado. Realizamos esse filtro através do método filter 
no parâmetro do callback do array de requisicoes$. 


Por último, comparamos as propriedades email do solicitante 
da requisição com o do funcionário logado em 


r.solicitante.email === this.funcionarioLogado.email. 


No próximo método, configuramos o formulário: 


configForm() { 
this.form = this.fb.group(f 
id: new FormControl(), 
destino: new FormControl('', Validators.required), 
solicitante: new FormControl(''), 
dataAbertura: new FormControl(''), 
ultimaAtualizacao: new FormControl(''), 
status: new FormControl(''), 
descricao: new FormControl('', Validators.required) 


3) 


Definimos os campos id, destino , solicitante , 
dataAbertura , ultimaAtualizacao , status e descricao , 
indicando quais terão validações. A diferença dos últimos 
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componentes fica na implementação do método add() que 
invoca o método setValorPadrao(). 
add() { 

this.form.reset(); 

this.edit = false; 


this.displayDialogRequisicao = true; 
this.setValorPadrao(); 


Precisamos setar valores padrões na abertura de toda 
requisição. 
setValorPadrao() { 
this.form. patchvalue(( 
solicitante: this.funcionarioLogado, 
status: 'aberto!, 


dataAbertura: new Date(), 
ultimaAtualizacao: new Date() 


}) 
3 

Utilizamos o método patchValue para fazer uma atualização 
parcial nos campos do formulário, informando o funcionário 
logado, o status para aberto e a data atual para os campos 
dataabertura e ultimaatualizacao com uma nova instância, 
através do new Date(). 


Os métodos para salvar, recuperar e excluir são iguais aos 
componentes do capítulo anterior. 


Para ver o código completo da classe, acesse 
https://bit.ly/2)JyE912. 


O próximo passo é a codificação do template em 
requisicao.component.html. 


No trecho em que codificamos a tabela: 
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<table class="table table-striped table-hover table-bordered col- 
centered"> 
<thead class="thead-dark"> 
<tr> 
<th class="text-center">abertura</th> 
<th class="text-center">Última atualização</th> 
<th class="text-center">Departamento</th> 
<th class="text-center">Status</th> 
<th class="text-center">Movimentações</th> 
<th class="text-center">ações</th> 
</tr> 
</thead> 
<tbody> 
<tr *ngFor="let requisicao of requisicoes$ | async "> 
<td class="text-center">((requisicao.dataAbertura.toDa 
te() | date : 'dd/MM/yyyy HH:mm'}}</td> 
<td class="text-center">((requisicao.ultimaAtualizacao 
.toDate() | date : 'dd/MM/yyyy HH:mm'}}</td> 
<td class="text-center">((requisicao.destino.nomej)</t 
> 
<td class="text-center">((requisicao.status]JI</td> 
<td class="text-center"> 
<span class="badge badge-pill badge-secondary"> 
tf!requisicao.movimentacoes?. length ? '0': requisi 
cao.movimentacoes?. length)) 
</span> 
</td> 
<td class="text-center"> 
<button type="button" (click)="selecionaRequisicao(r 
equisicao)" class="btn btn-success "> 
<i class="fas fa-edit"'></i> 
</button> 
<button type="button" (click)="delete(requisicao)" c 
lass="btn btn-danger "> 
<i class="fas fa-trash"></i> 
</button> 
</td> 
</tr> 
</tbody> 
</table> 


Definimos o cabeçalho da tabela com os campos da requisição. 
Em seguida, utilizamos um pipe para exibir campos de data. 
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Para isso, devemos chamar o método toDate() do atributo e, 
em seguida, usar o operador e o pipe | date . Definimos ainda o 
formato da data e hora após os dois pontos em dd/MM/yyyy 
HH:mm . 


Também informamos o número de movimentações da 

requisição, através do tamanho do array em 

requisicao.movimentacoes?.length . Usamos o operador safe 
? para evitar exceções de valores nulos ou indefinidos. 


No detalhe, o resultado da formatação para cada linha: 


Abertura Última atualização Departamento Status Movimentações Ações 


10/05/2019 13:30 10/05/2019 13:30 n aberto 0 “O 


Figura 7.2: Registro da Requisição 


O dialog que contém o formulário segue o padrão dos 
componentes de inclusão: 


<p-dialog header="Dados da Requisição" [style]="( width: '8ovw' 3 
[contentStyle]="('overflow':'visible'3" 
[(visible)]="displayDialogRequisicao" [responsive]="true" [modal 

J="true"> 

<form [formGroup]="form" class="p-fluid p-formgrid p-grid" *ng 
If="form.value"> 
<div class="p-field p-col-12 p-md-12"> 
<label for="departamento">Destino*:</label> 
<ng-select [items]="departamentos$ | async" bindLabel="nome 
formControlName="destino"> 
</ng-select> 
</div> 
<div class="p-field p-col-12 p-md-12"> 
<label for="descricao">Descricao*:</label> 
<textarea rows="5" cols="30" pInputTextarea formControlName: 
"descricao"></textarea> 
</div> 
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</form> 


<div *ngIf="form.controls['destino'].errors || form.controls['d 
escricao'].errors" class="text-warning text-left "> 
*Preenchimento Obrigatório</div> 
<div class="p-d-flex p-jc-end"> 
<button [disabled]="!form.valid" type="button" class="btn btn 
-primary" (click)="save()"> 
<i class="fas fa-check-circle"></i> {{edit ? 'Atualizar' 
'Salvar'}} 
</button> 
</div> 
</p-dialog> 


A diferença está no uso do campo textarea para o atributo 
descricao . 


O resultado do dialog pode ser visto aqui: 


h 


Dados da Requisição z 
Destino*: RH a 
Descricao*: 


Solicitação de Férias | 











Figura 7.3: Dialog da Requisição 


Abrindo o console do Firebase 
(https://console.firebase.google.com), no menu Database , temos 
as coleções armazenadas com os respectivos documentos. 
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A requisicoes-app [EB requisicoes = 1 OFpSfJv2DHhUbfjyCKOM 


[=] 
+ Adicionar coleção + Adicionar documento + Adicionar coleção 
= 


departament ØFpSfJv2DHhUbf jyCKOM > E ERA 


aAbertura: 10 de maio de 2019 13:30:41 UTC-3 


requisicoes > 190Xan7awBe JublhavM À j 
escrica Solicitação de suprimento de impresasão 


CBLZJIO4giv47rraDtwz 
e: 
telefone: *(11)1111-1111 
"OFpSfJv2DHhUDfiyCKOM' 


C8LZJiO4giY47rrqDtwz' 
ome: "TI 


telefone: *(11)1111-1111 


Figura 7.4: Coleções no Firebase 


Para visualizar a implementação completa do componente, 
acesse https://bit.ly/2YpgZyg. 


Assim, finalizamos a primeira parte do requisito. Na próxima 
seção vamos construir o componente para dar movimentações às 
requisições. 


7:2 REQUISIÇÕES SOLICITADAS - 
TRABALHANDO COM @INPUT 


No próximo componente, vamos listar todas as requisições 
destinadas ao departamento do funcionário logado. 


O objetivo também será criar um componente reutilizável em 
outra parte da aplicação, no caso, o painel. 


Assim, vamos explorar o uso do @Input para criar interação 
entre os componentes. 
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No terminal, criamos o módulo e o componente 
movimentacao informando: 


ng g m components/admin/movimentacao --routing 
ng g c components/admin/movimentacao 


Começamos importando os módulos básicos para manipulação 
e exibição de dados no componente em 
movimentacao.module.ts na pasta movimentacao : 


import ( NgModule ) from 'QGangular/core'; 

import ( MovimentacaoRoutingModule 3 from './movimentacao-routing 
.module'; 

import { MovimentacaoComponent } from './movimentacao.component'; 
import { ComumModule } from 'src/app/modules/comum.module'; 
import { NgSelectModule } from '@ng-select/ng-select'; 


@NgModule({ 
declarations: [MovimentacaoComponent], 
imports: [ 
ComumModule, 
MovimentacaoRoutingModule, 
NgSelectModule 


] 
}) 


export class MovimentacaoModule { } 

E a configuração da rota para utilizarmos o Lazy Loading, no 
arquivo movimentacao-routing.module.ts : 
const routes: Routes = [ 


{ path: '', component: MovimentacaoComponent } 


l; 

Não vamos criar uma rota específica para esse componente. 
Isso porque utilizaremos uma abordagem de componente pai-filho. 
Nesse caso, a classe pai será o componente da requisição e vamos 


referenciar no template requisicao.component.html o seletor 
da movimentação app-movimentacao disponível na classe do 
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componente movimentacao.component.ts. 


Em seguida, começamos a codificação dessa classe. Criaremos 
os atributos e métodos para incluir movimentações na requisição, 
assim temos os seguintes campos abaixo da assinatura da classe: 
export class MovimentacaoComponent implements OnInit { 

OInput() funcionarioLogado: Funcionario; 
requisicoes$: Observable<Requisicao[]>; 
movimentacoes: Movimentacao[]; 
requisicaoSelecionada: Requisicao; 

edit: boolean; 
displayDialogMovimentacao: boolean; 
displayDialogMovimentacoes: boolean; 
form: FormGroup; 

listaStatus: stringl[]; 

Conforme mencionado, faremos uso do QInput() associando 
ao atributo funcionarioLogado . Dessa forma, indicamos esse 


atributo como uma propriedade de entrada. 


Durante a detecção de alterações, o Angular atualiza as 
propriedades dos dados com o valor informado no componente 


pai. 


Ainda nas declarações, definimos duas listas para exibibir as 
requisições e as movimentações, através dos objetos 
requisicoes$ e movimentacoes , além de duas propriedades 
para exibição de dialogs, displayDialogMovimentacao e 


displayDialogMovimentacoes . 


Finalizamos a declaração com um atributo para exibir as 
opções de status para a movimentação, listaStatus , com um 
array de string. 


Continuando a escrita do código, vamos invocar em 
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constructor alguns métodos para definir os campos do 
formulário, listar as requisições e carregar as opções de status. 


constructor (private requisicaoService: RequisicaoService, private 
fb: FormBuilder) { 3 
ngonInit() { 
this.configForm(); 
this.carregaStatus(); 
this. listaRequisicoesDepartamento(); 


} 

No método construtor temos o serviço da requisição 
RequisicaoService ea classe para o formulário FormBuilder , 
além dos métodos que invocaremos na inicialização do 


componente. 
A seguir, escrevemos o método configForm() : 


configForm() { 
this.form = this.fb.group(f 
funcionario: new FormControl('', Validators.required), 
dataHora: new FormControl(''), 
status: new FormControl('', Validators.required), 
descricao: new FormControl('', Validators.required) 


3) 
J 


Definimos os campos funcionario, dataHora , status e 
descricao para incluir a requisição, definindo as validações com 


Validators.required . 


Na sequência, vamos implementar o método 


carregaStatus(). 


carregaStatus() { 
this.listaStatus = ['Aberto', 'Pendente', 'Processando'", 'Não 


autorizada", 'Finalizado']; 


} 


Populamos o array listaStatus com as opções definidas 


7.2 REQUISIÇÕES SOLICITADAS - TRABALHANDO COM @INPUT 111 


entre os colchetes. 


E finalmente temos o método 


listaRequisicoesDepartamento() : 


listaRequisicoesDepartamento() { 
this.requisicoes$ = this.requisicaoService.list() 
.pipe( 
map( (reqs: Requisicao[]) => 
reqs.filter(r => 
r.destino.nome === this.funcionarioLogado.departamento.nom 


e)) 


Para listar somente as requisições do departamento do 
funcionário utilizamos o método filter , comparando em cada 
objeto r o nome do departamento: r.destino.nome === 


this. funcionarioLogado. departamento. nome . 


Ainda na sequência da classe movimentacao. component .ts, 
implementaremos uma função para adicionar uma nova 
requisição: 
add(requisicao: Requisicao) { 

this.form.reset(); 

this.edit = false; 

this.setValorPadrao(); 

this.requisicaoSelecionada = requisicao; 

this.movimentacoes = (!requisicao.movimentacoes ? [] : requisi 
cao.movimentacoes); 

this.displayDialogMovimentacao = true; 


} 


No parâmetro do método, passamos a requisição que será 
selecionada no template do componente. Em seguida, atribuímos 
em this.requisicaoSelecionada o objeto requisicao para 
manipular posteriormente. 
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Ainda, associamos o valor de movimentações, verificando 


antes a existência de valores em !requisicao.movimentacoes . 


No próximo método, save() , efetivamos a persistência das 
movimentações, atualizando alguns campos da requisição, 
conforme a implementação a seguir: 


save() { 
this.movimentacoes. push(this.form.value); 
this.requisicaoSelecionada.movimentacoes = this.movimentacoes 


this.requisicaoSelecionada.status = this.form.controls['statu 
s'].value 

this.requisicaoSelecionada.ultimaatualizacao = new Date(); 

this.requisicaoService.createOrUpdate(this.requisicaoSelecion 
ada) 


«then(() => { 
this.displayDialogMovimentacao = false; 
Swal.fire( Requisição $(!this.edit ? 'salvo' : 'atualizad 
o') com sucesso: z; T"; 'success'); 
3) 


.«catch( (erro) => { 
this.displayDialogMovimentacao = true; 


Swal.fire( Erro ao $f(!this.edit ? 'salvo' : 'atualizado') 
o Requisição.”, Detalhes: $ferro)', 'error'); 
3) 
this.form.reset() 


} 


Inicialmente adicionamos a movimentação no array com os 
valores do formulário, em 
this.movimentacoes.push(this.form.value) , e atribuímos o 
array de movimentações ao objeto da requisição selecionada, no 
trecho this.requisicaoSelecionada.movimentacoes = 


this.movimentacoes . 


Em seguida, atualizamos o status e a data da última atualização 
com this.requisicaoSelecionada. status = 


this.form.controls['status'].value e 
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this.requisicaoSelecionada.ultimaatualizacao = new 
Date(). 


Assim invocamos o método createorUpdate com o objeto 


requisicaoSelecionada . 


Vale ressaltar que o método é uma operação de atualização, 
pois já temos no banco a requisição. O que fizemos foi adicionar 
elementos no array da propriedade movimentacoes do modelo. 


O método para excluir é igual às outras implementações. 


Para finalizar a classe, vamos incluir dois métodos que servirão 
basicamente para fechar o dialog do próximo componente: 


onDialogClose(event) { 
this.displayDialogMovimentacoes = event; 


} 
E para visualizar as movimentações da requisição: 


verMovimentacoes(requisicao: Requisicao) { 
this.requisicaoSelecionada = requisicao; 
this.movimentacoes = requisicao.movimentacoes; 
this.displayDialogMovimentacoes = true; 


} 

Passamos no parâmetro a requisição selecionada, 
verMovimentacoes(requisicao: Requisicao) , e atribuímos 
aos objetos requisicaoSelecionada e movimentacoes o objeto 
requisicao , declarado no parâmetro. Também exibimos o 
dialog de movimentações com displayDialogMovimentacoes = 


true. 


Já temos toda a lógica do componente programada. Vamos 
desenvolver o template em movimentacao.component.html , 
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utilizando o padrão de layout assumido na aplicação. 


Template do componente Movimentação 


Vamos iniciar analisando o trecho responsável pela exibição da 
tabela, conforme o código a seguir. 


<table class="table table-striped table-hover table-bordered col- 
centered"> 
<thead class="thead-dark"> 
<tr> 
<th class="text-center">abertura</th> 
<th class="text-center">Última atualização</th> 
<th class="text-center">Departamento</th> 
<th class="text-center">Status</th> 
<th class="text-center">Movimentações</th> 
<th class="text-center">Ações</th> 
</tr> 
</thead> 
<tbody> 
<tr *ngFor="let requisicao of requisicoes$ | async "> 
<td class="text-center">((requisicao.dataAbertura?.toD 
ate() | date : 'dd/MM/yyyy HH:mm'33)</td> 
<td class="text-center">((requisicao.ultimaAtualizacao 
?.seconds * 1000 | date : 'dd/MM/yyyy HH:mm' }}</td> 
<td class="text-center">((requisicao.destino.nomeJ)</t 


<td class="text-center">((requisicao.status))J</td> 
<td class="text-center"> 
<span class="badge badge-pill badge-secondary"> 
(tt!requisicao.movimentacoes?. length ? '0': requisi 
cao.movimentacoes?. length)) 
</span> 
</td> 
<td class="text-center"> 
<button type="button" (click)="add(requisicao)" clas 
="ptn btn-info"> 
<i class="fa fa-plus-circle"></i> 
</button> 
<button type="button" (click)="verMovimentacoes(requ 
isicao)" class="btn btn-success"> 
<i class="far fa-list-alt"></i> 
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</button> 
</td> 
</tr> 
</tbody> 
</table> 


Temos a definição das colunas na primeira linha <tr> para 
exibição dos valores de cada requisição. Na sequência, iteramos 
sobre cada objeto, utilizando o operador *ngFor="let 


requisicao of requisicoes$. 


Observe uma mudança na exibição de campos do tipo date . 
Até agora usávamos a seguinte notação para exibição desses 
valores: objeto.propriedade.toDate() | date. 


Dessa vez codificamos a exibição do campo de última 
atualização recuperando os segundos e multiplicando por 1000, em 
requisicao.ultimaAtualizacao?.seconds * 1000 . Dessa 
forma conseguimos exibir o campo no formato de data 
corretamente sem erros ao incluir movimentações ao atualizar o 
atributo da requisição. 


Na definição dos botões, temos o método add(requisicao) 
no evento click responsável pela nova movimentação. 
Declaramos também o método que exibe todas as movimentações 


em "verMovimentacoes(requisicao). 


No código seguinte, fazemos o dialog para inclusão da 
movimentação: 


<p-dialog header="Dados da Requisição" [minwidth]="600" [contents 
tyle]="['overflow':'visible'3" 
[(visible)]="displayDialogMovimentacao" [responsive]="true" [mo 
dal]="true"> 
<div class="ui-grid ui-grid-responsive ui-fluid" *ngIf="form.va 
lue"> 
<div class="ui-grid-row mb-3"> 
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<div class="ui-grid-col-4"> 
<label for="departamento">Solicitante:</label> 
</div> 
<div class="ui-grid-col-8 text-primary"> 
((requisicaoSelecionada?.solicitante.nome)) 
</div> 
</div> 
<div class="ui-grid-row mb-3"> 
<div class="ui-grid-col-4"> 
<label for="descricao">Solicitação:</label> 
</div> 
<div class="ui-grid-col-8 "> 
<textarea rows="5" cols="30" disabled pInputTextarea [val 
ue]="requisicaoSelecionada?.descricao"></textarea> 
</div> 
</div> 
<form [formGroup]="form"> 
<div class="ui-grid-row mb-3"> 
<div class="ui-grid-col-4"> 
<label for="departamento">Status*:</label> 
</div> 
<div class="ui-grid-col-8 "> 
<ng-select [items]="listaStatus" formControlName="statu 
s"> 
</ng-select> 
</div> 
</div> 
<div class="ui-grid-row mb-3"> 
<div class="ui-grid-col-4"> 
<label for="descricao">Descricao*:</label> 
</div> 
<div class="ui-grid-col-8 "> 
<textarea rows="5" cols="30" pInputTextarea formControlN 
ame="descricao"></textarea> 
</div> 
</div> 
</form> 
</div> 
<p-footer> 
<div *ngIf="form.controls['status'].errors || form.controls[' 
descricao'].errors" class="text-warning text-left "> 
*Preenchimento Obrigatório</div> 
<div class="ui-dialog-buttonpane "> 
<button [disabled]="!form.valid" type="button" class="btn b 
tn-primary" (click)="save()"> 
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<i class="fas fa-check-circle"></i> {{edit ? 'Atualizar' 
'Salvar'}} 
</button> 
</div> 
</p-footer> 
</p-dialog> 
No primeiro segmento, 
{{requisicaoSelecionada? .solicitante.nome}} , exibimos o 
nome do solicitante, e a descrição da solicitação na propriedade 
com o trecho [value]="requisicaoSelecionada?. descricao" 
do campo de texto, porém, a marcamos como desabilitada, com 


disabled. 


Para o objeto requisicaoSelecionada , utilizamos 
novamente o operador safe ? para evitar erros de renderização. 


Na sequência, temos a tag <form com a declaração dos 
campos de entrada para status e descricao. 


No campo status utilizamos o componente <ng-select 
para exibir as opções com a fonte de dados em 


[items]="listaStatus". 
O restante segue igual aos componentes já desenvolvidos. 


Para ver o código completo do componente, acesse 
https://bit.ly/2WCVUjv. 


Dessa forma, já temos o componente construído, ou seja, a 
lógica e o template, porém, ele não aparece ainda no navegador. 


A seguir, vamos associar o componente filho 
movimentacao.component.ts no componente pai 


requisicao.component.ts 
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7.3 ASSOCIANDO OS COMPONENTES 


Vamos abrir o template requisicao.component.html e 
adicionar a seguinte linha: 
<app-movimentacao *ngIf="funcionarioLogado" [funcionarioLogado]=" 
funcionarioLogado"></app-movimentacao> 

A tag <app-movimentacao é responsável pela renderização do 
componente movimentacao recém-criado. Informamos a diretiva 


condicional com *ngIf para o atributo funcionarioLogado . 
Dessa forma, conseguimos evitar erros de renderização. 


Usamos o atributo [funcionarioLogado] para conectar os 
componentes pai-filho, concluindo a abordagem para reutilizar o 
componente. 


Para finalizar esse componente, devemos informar o 
componente filho no módulo do pai. 


Para isso, abrimos a classe requisicao.module.ts œ 
incluímos no array de declaração em declarations o 
componente da movimentação MovimentacaoComponent , 
conforme o trecho a seguir: 


declarations: [RequisicaoComponent, MovimentacaoComponent] 


Dessa forma, finalizamos a integração dos componentes. Ao 
executar ng serve -o e clicar no menu para a rota de 
requisições já temos os dois componentes na tela, conforme 
imagem do início do capítulo. 


Resta o componente para exibição das movimentações, tarefa 
que concluiremos na próxima seção. 
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7.4 LISTA DE MOVIMENTAÇÕES 


O objetivo nesse componente é exibir todas as movimentações 
de uma requisição, listando somente as opções de edição que 
foram registradas pelo usuário logado. 


No terminal, criamos o módulo e componente com os 
comandos: 


ng g m components/admin/movimentacao/lista --routing 
ng g c components/admin/movimentacao/lista 


Solicitamos a criação do componente dentro da estrutura 
criada para movimentacao . Também não vamos definir uma rota, 
pois utilizaremos a abordagem de composição de componentes 


pai-filho. 


Para não estender, é preciso aplicar as mesmas configurações 
de importação no módulo lista.module.ts e vínculo do 
componente em lista-routing.module.ts , detalhadas nas 
seções anteriores, substituindo pelas referências atuais. 


Na classe do componente lista.component.ts temos as 
seguintes declarações: 


export class ListaComponent implements OnInit { 


OInput() movimentacoes: Movimentacao[]; 
OInput() requisicaoSelecionada: Requisicao; 
OInput() displayDialogMovimentacoes: boolean; 
OInput() funcionarioLogado: Funcionario; 
Ooutput() displayChange = new EventEmitter(); 


listaStatus: stringl[]; 
displayDialogMovimentacao: boolean; 
form: FormGroup; 

edit: boolean; 

indexMovimentacoes: number; 
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Temos vários objetos cujos valores receberemos de outros 
componentes, indicados com o decorator QInput() , como a lista 
de movimentação em movimentacoes , a requisição selecionada 
no objeto requisicaoSelecionada , o dialog que exibe a lista em 

displayDialogMovimentacoes e funcionarioLogado , que 
representa o funcionário logado na aplicação. 


Em seguida, temos o decorator Goutput() , que significa a 
ordem inversa da emissão do evento, ou seja, enquanto o 
OInput() representa o fluxo do pai para o filho, em (output () 
o fluxo está na direção do componente filho que emite um evento 

para o pai. 


Na propriedade displaycChange vamos informar ao 
componente pai o fechamento do dialog. Para isso precisamos 
instanciar a classe EventEmitter. 


Vamos precisar de uma variável para guardar o índice da tabela 
de movimentações. Fazemos isso com indexMovimentacoes para 
realizar as operações de atualização e exclusão. 


Continuando o código da classe, temos no método construtor a 
injeção necessária do serviço e do formulário em: 
constructor( 


private requisicaoService: RequisicaoService, 
private fb: FormBuilder 


J-A 


Observe que tivemos uma redução considerável de declarações 
no método construtor por conta do uso de @Input , cujos valores 
serão recebidos da classe pai. No método ngonInit() chamamos 
dois métodos: 


ngOnInit() { 
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this.configForm(); 
this.carregaStatus(); 


} 


Esses métodos são responsáveis pela configuração do 
formulário e a lista de status, conforme implementação a seguir: 


configForm() { 
this.form = this.fb.group({ 
funcionario: new FormControl('', Validators.required), 
dataHora: new FormControl(''), 
status: new FormControl('', Validators.required), 
descricao: new FormControl('', Validators.required) 


}) 
} 

Em configForm() temos a definição dos campos no 
formulário funcionario, dataHora, status ,e descricao 
com as validações Validators.required. 


E o método para exibir as possibilidades de status para um 
movimento em: 
carregaStatus() { 


this.listaStatus = ['Aberto', 'Pendente', 'Processando'", 'Não 
autorizada", 'Finalizado']; 


3 


A seguir, vamos implementar um método para selecionar a 
movimentação em: 
selecionaMovimento(mov: Movimentacao, index: number) { 
this.edit = true; 
this.displayDialogMovimentacao = true; 


this.form.setValue(mov); 
this.indexMovimentacoes = index; 


Informamos no parâmetro o movimento e o índice do array 


com mov: Movimentacao, index: number . Definimos o modo 
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de edição e o dialog para true , além de setar o valor no 
formulário com this.form.setValue(mov) . Concluímos 
guardando o valor da variável do índice para o atributo 
indexMovimentacoes . 


No método para fechar o dialog temos: 


onClose() { 
this.displayChange.emit(false); 


J 


Basicamente informamos o valor booleano false no 
parâmetro do método em emit(false) . Assim conseguimos 
informar a emissão do evento ao componente pai, fechando o 
dialog. 


No método a seguir, vamos implementar o código que atualiza 
a movimentação: 


update() { 
this.movimentacoes[this.indexMovimentacoes] = this.form.value 
this.requisicaoSelecionada.movimentacoes = this.movimentacoes; 
this.requisicaoSelecionada.status = this.form.controls['status 
].value 
this.requisicaoSelecionada.ultimaAtualizacao = new Date(); 
this.requisicaoService.create0rUpdate(this.requisicaoSeleciona 


da) 
.then(() => { 
this.displayDialogMovimentacao = false; 
Swal.fire(` Movimentação ${!this.edit ? 'salvo' : 'atualiza 
do') com sucesso ; 1; success"); 
H 
.catch( (erro) => { 
this.displayDialogMovimentacao = true; 
Swal.fire( Erro ao ${!this.edit ? 'salvo' : 'atualizado'} 
o Movimentação. `, `Detalhes: ${erro}`, 'error'); 
}) 
this.form.reset() 
) 
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Inicialmente, atualizamos o elemento this.movimentacoes 
com os valores do formulário, com base na posição do array, 
através do trecho 

this.movimentacoes[ this. indexMovimentacoes |] = 
this.form.value . 


Atualizamos © array de movimentações em 

this.requisicaoSelecionada.movimentacoes = 

this.movimentacoes; e o status atual da requisição selecionada 
com o objeto this.requisicaoSelecionada.status . 


Além disso, atualizamos o atributo da última atualização com 
new Date() . Na sequência, invocamos a função 
createorUpdate para efetivar a atualização do registro. 


Para realizar a exclusão, inicialmente desenvolvemos uma 
função auxiliar: 
remove(array, element) { 


return array. filter(el => el !== element); 


} 


Há várias abordagens para remover um elemento de um array. 
Entre elas podemos utilizar o método filter . Assim temos o 
retorno de um novo array com todos os elementos, exceto o 
informado no parâmetro da função em el !== element . 


Assim, partimos para a função de exclusão: 


delete(mov: Movimentacao) { 
const movs = this.remove(this.movimentacoes, mov) 
Swal.fire({ 
title: 'Confirma a exclusão da Movimentação? ', 
text: "", 
type: 'warning', 
showCancelButton: true, 
confirmButtonText: 'Sim', 
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cancelButtonText: 'Não' 
)).then((result) => { 
if (result.value) { 
this.requisicaoSelecionada.movimentacoes = movs; 
this.requisicaoService.create0rUpdate(this.requisicaoSelec 
ionada) 


.then(() => { 
Swal.fire('Movimentação excluída com sucesso!', '', 's 
uccess') 
this.movimentacoes = movs; 
3) 
} 
1) 
) 


Passamos no parâmetro da função delete o objeto de 
movimento em mov: Movimentacao . Definimos uma constante 
que recebe o array sem o elemento no parâmetro através do trecho: 
const movs = this.remove(this.movimentacoes, mov). 


Observe que não chamamos o método de exclusão no serviço. 
Diante da confirmação do usuário, em if (result.value) , nós 
atualizamos o registro da requisição com o novo array filtrado nas 
linhas: 


this.requisicaoSelecionada.movimentacoes = movs; 
this.requisicaoService.createOrUpdate(this.requisicaoSelecionada) 


A visualização do código completo está em 
https://bit.ly/2VBK3ps. 


Partimos para codificação do template da lista em 
lista.component .html. 


Template Lista 


Vamos abrir o arquivo em  lista.component.html . O 
componente será exibido no dialog , dessa forma, iniciamos a 
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codificação em: 


<p-dialog header="Movimentações" [minWidth]="600" [contentStyle]= 
"('overflow':'visible'3" 

[(visible)]J="displayDialogMovimentacoes" (onHide)="onClose()" [r 
esponsive]="true" [modal]="true"> 


Definimos as propriedades do dialog e o método 
(onHide)="onClose()" , que definimos na lógica do 
componente anteriormente como (Output. 


Na sequência, fazemos o HTML da tabela para exibir os 
movimentos em: 


<table class="table table-striped table-hover table-bordered col- 
centered"> 
<thead class="thead-dark"> 
<tr> 
<th class="text-center">Data</th> 
<th class="text-center">Funcionario</th> 
<th class="text-center">Status</th> 
<th class="text-center">Ações</th> 
</tr> 
</thead> 
<tbody> 
<tr *ngFor="let movimento of movimentacoes; index as i"> 
<td class="text-center">((movimento.dataHora.seconds * 1 
000 | date : 'dd/MM/yyyy HH:mm'33</td> 
<td class="text-center">((movimento.funcionario.nomeJ)</ 
td> 
<td class="text-center">((movimento.status)J)</td> 


Definimos o cabeçalho e as propriedades de exibição para 
Data , Funcionario e Status. 


Na iteração do array , utilizamos novamente o operador 

*ngFor . Observe que criamos uma variável para guardar o índice 

com index as i. Novamente, utilizamos um pipe para formatar 
adataem | date : 'dd/MM/yyyy HH:mm' . 
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Nas células dos botões, codificamos da seguinte maneira: 


<td class="text-center"> 
<div *ngIf="funcionarioLogado.email === movimento. func 
ionario.email"> 
<button type="button" (click)="selecionaMovimento (mo 
vimento,i)" class="btn btn-success "> 
<i class="fas fa-edit"'></i> 
</button> 
<button type="button" (click)="delete(movimento)" cl 
ass="btn btn-danger"> 
<i class="fas fa-trash"></i> 
</button> 
</div> 
</td> 


Condicionamos a exibição das colunas em um div com base 
no email do funcionário logado e do registro de quem criou a 
movimentação em *ngIf="funcionarioLogado.email === 


movimento. funcionario.email". 


O resultado da condição está na imagem a seguir. 
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Movimentações “a 


Data Funcionario Status Ações 


14/05/2019 11:26 Kheronn Machado Pendente E O 
14/05/2019 11:26 'Kheronn Machado Não autorizada (E) é 
14/05/2019 11:26 | Kheronn Machado Aberto (EB © 


14/05/2019 13:57 Khaike Machado Processando 





Figura 7.5: Movimentações 


Observe que o último registro não exibe os botões na coluna de 
ações pois foram lançados por um usuário diferente do 
funcionário logado. 


No método selecionaMovimento(movimento, i) 


informamos o movimento e o índice no parâmetro. 


Na sequência, temos o dialog exatamente igual ao que fizemos 
no componente anterior. Poderia ser um componente reutilizável, 
não? Fica o exercício. 


O código completo do template está disponível em 
https://bit.ly/2EcwMsD. 


Novamente, para que exiba o componente no navegador, 
devemos informar a tag desse componente no componente pai. 
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Insira no final do arquivo em 
movimentacao.component.html. 
<app-lista [displayDialogMovimentacoes]="displayDialogMovimentaco 
es" [movimentacoes]="movimentacoes" 
[requisicaoSelecionada]="requisicaoSelecionada" [funcionarioLoga 
doJ="funcionarioLogado" (displayChange)="onDialogClose($event )">< 
app-lista> 
Vinculamos os valores da classe pai em 
movimentacao. component .ts aos atributos de entrada 
[displayDialogMovimentacoes] , [movimentacoes] , 
[requisicaoSelecionada] e ao de saídaem (displayChange) 
da classe filho lista.component.ts. 


A imagem a seguir apresenta a composição dos componentes. 


Minhas Requisições | o ) 

















Última atualização Departamento Status Movimentações Ações requisicao.component.htmi 
14/05/2019 10:56 CONTABILIDADE Aberto 
x 
13/05/2019 16:11 17/05/2019 11:56 T Pendente ( 8090 
13/05/2019 1601 14/05/2019 14:03 T Processando 
g 
Movimentações x 
Requisições soli Dora Funcionario sumo ações 
3/05/2019 1608  Kheronn Machado Pendente 
o 
SEK: passe e 
4/05/2019 13:34  Kheronn Machado Processando 
o 
13/05/2019 16:11 1 E 
movimentacao.component.html 
05/2019 1626 Knerorm Machado Näo autorizada 
o 
5/2019 1601 1 
95/2019 1655 Kheronn Machado Processando O o 
14/05/201912:57 Khake Machado Processand 
lista.component.html 


Figura 7.6: Composição dos componentes 


Para finalizar, declaramos o componente no array em 
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declarations , incluindo o componente Listacomponent em 
requisicao.module.ts , conforme instrução a seguir: 


declarations: [RequisicaoComponent, MovimentacaoComponent, Lis 
taComponent], 


Por enquanto, conforme aumentam os lançamentos das 


requisições, o conteúdo da página se estende, e perdemos a posição 
do scroll (barra de rolagem) ao navegar entre os componentes. 


Para corrigir esse comportamento, devemos editar o arquivo 
de rotas da aplicação em app-routing.module.ts na pasta 


app. 


No array de imports insira na frente de routes a opção 
scrollPositionRestoration : 


RouterModule.forRoot(routes, {scrollPositionRestoration: 'enabled 


})] 


A opção enabled restaura as posições de rolagem durante a 
navegação. Ao navegar para a frente, a posição de rolagem será 
definida para as coordenadas [0, 0]. 


E assim finalizamos a implementação do requisito Gerenciar 
Requisições. 


Nos próximos capítulos vamos explorar outros recursos do 
Firebase na implementação dos requisitos da aplicação. 


130 7.4 LISTA DE MOVIMENTAÇÕES 


CarírtuLo 8 


FIREBASE CLOUD 
STORAGE - SALVANDO 
ARQUIVOS ESTÁTICOS 


Além dos serviços de banco de dados e autenticação já 
explorados na construção da nossa aplicação, podemos utilizar 
outro serviço da Firebase, o Cloud Storage. 


O Cloud Storage permite o armazenamento de arquivos, como 
imagens, vídeos ou outros conteúdos do usuário. 


Assim como outros recursos da plataforma do Firebase, esse 
serviço também é escalável e seguro, permitindo a criação de 
regras de segurança nas operações de download e upload. 


O objetivo deste capítulo é a integração do serviço na nossa 
aplicação, através da atualização de uma funcionalidade no 
componente de funcionários. 


Vamos implementar a possibilidade de realizar o upload de 
foto do funcionário. 
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8.1 CONFIGURANDO AS REGRAS DE ACESSO 


Antes de implementar o código, vamos acessar o console do 
Firebase (https://console.firebase.google.com) e clicar no menu 


Storage. 


Na primeira vez em que acessamos, temos o seguinte resultado: 


Armazenar e recuperar arquivos gerados 
o pelo usuário, como imagens, áudio e vídeos, 


> = sem o código do lado do servidor 
Q Saiba mais = Ver os documentos 


Primeiros passos 





Figura 8.1: Home do Serviço de Storage 


Há um link explicando o serviço e a documentação dos 
recursos. Vamos clicar no botão Primeiros passos . 


Na sequência, é mostrado um dialog para a definição das regras 
de segurança. 
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Regras de segurança X 
Por padrao, suas regras per mitem todas as leituras e gravaçoes de usuarios autenticados 


s de definir sua estrutura de dados, será necessário criar regras para proteger seus 





Saiba mais A 


service firebase.storage ( 
match /b/(bucket)/o ( 
match /(allPaths=**) ( 
allow read, write: if request.auth != null; 
} 
} 
} 


Cancelar E3 


Figura 8.2: Regras de Segurança 


O padrão é a permissão de todas operações de acesso e 
gravação de usuários autenticados. 


Essa regra já atende aos nossos requisitos, pois queremos que o 
usuário possa realizar o upload de fotos somente após o login. 
Confirmamos no botão Ok. 


Após a confirmação, uma tela com uma tabela vazia é 
apresentada. Esse é o local de acesso aos arquivos e pastas que o 
usuário salvar. 


Ao clicar na segunda guia temos a regra atual: 


service firebase.storage { 
match /b/(bucket3/0 { 
match /(allPaths=**) { 
allow read, write: if request.auth != null; 
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Essas definições são utilizadas para definir quem tem acesso à 
leitura e gravação dos arquivos, representadas respectivamente por 


read e write. 


As regras devem especificar primeiro o tipo de serviço, nesse 

caso o firebase.storage , e o intervalo do Cloud Storage com 

match /b/{bucket}/o . Além disso elas estão associadas aos 
caminhos dos recursos com match 


O tipo básico de regra é o allow. Após as operações, temos a 
opção de definir uma condição precedida de dois pontos, com if 
request .auth != null . Nesse caso, a avaliação da solicitação 
verifica na variável request o usuário autenticado em auth 


Já podemos retornar ao projeto e codificar uma função que 
utilize o serviço. 


8.2 LÓGICA E TEMPLATE PARA UPLOAD DE 
FOTOS DO FUNCIONÁRIO 


Na classe do componente do funcionário 
funcionario.component.ts vamos incluir alguns objetos para 
realizar a função. 


Abaixo dos objetos já declarados inclua o código: 


OviewChild('inputFile', { static: false 3) inputFile: ElementRef 


F 

uploadPercent: Observable<number>; 
downloadURL: Observable<string>; 
task: AngularFireUploadTask; 
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complete: boolean; 


No primeiro objeto utilizamos um decorator do tipo 
QViewChild para acessar o componente. O nome informado nos 
parênteses, 'inputFile', deve ter uma referência no template, 
que faremos posteriormente. Além disso, incluímos o atributo 
static , que se encarrega de verificar os resultados da consulta 
antes da execução da detecção de alteração no componente. 


Em uploadPercent , escrevemos Observable<number> para 
acompanhar o progresso do upload. Já a variável downloadURL é 
utilizada para capturar o endereço do recurso no servidor, e o 
objeto task do tipo AngularFireUploadTask é uma interface 
para tarefas no storage. 


O atributo complete será responsável para marcar o início e 
fim do processo. 


Vamos precisar da classe AngularFireStorage para realizar 
as operações. Incluímos um objeto, injetando no construtor: 


constructor( 
private storage: AngularFireStorage, 


Dessa forma, já podemos escrever a função para o envio de 
arquivos: 


async upload(event) { 
this.complete = false; 
const file = event.target.files[0]; 
const path = `funcionarios/${new Date().getTime().toString())' 


const fileRef = this.storage.ref(path); 
this.task = this.storage.upload(path, file); 
this.task.then(up => { 
fileRef.getDownloadURL().subscribe(url => { 
this.complete = true; 
this.form. patchvalue(( 
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foto: url 


this.uploadPercent = this.task. percentageChanges(); 
this. inputFile.nativeElement.value = ''; 


} 


Codificamos o método upload(event) passando o 
parâmetro event vindo do template. Iniciamos a marcação do 
processo com this.complete = false e recuperamos o arquivo 
com o objeto file. 


Definimos um caminho com path , criando uma pasta 
funcionarios e nomeando o arquivo dinamicamente com a 
hora da instância da data através de new 
Date().getTime().toString(). 


Informamos a referência do caminho ao storage e 
invocamos o método upload(path, file) para efetivar a 
operação do envio da imagem. 


Com o objeto task , conseguimos recuperar o caminho, 
atualizando o campo do formulário no trecho: 


fileRef.getDownloadURL().subscribe(url => ( 
this.complete = true; 
this.form.patchvalue(( 
foto: url 


+) 
3); 

E  monitoramos © progresso do envio com 
this.uploadPercent = this.task.percentageChanges() , 
além de limpar o campo de upload com 
this. inputFile.nativeElement.value = '' para as próximas 
ações. 
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Vamos incluir no template do componente uma nova coluna 
para exibir a imagem e um campo para a seleção da imagem. 


Em funcionario.component .html , incluímos na seção da 
tabela uma nova coluna, com: 


<th class="text-center">Foto</th> 
E uma nova célula na linha da exibição: 


<td class="text-center"> 


<img [src]="funcionario.foto || '/assets/imgs/no-image.png'" st 
yle="width: 100px" class="img-fluid"> 
</td> 


Definimos no caminho da imagem a nova propriedade em 
[src]="funcionario.foto . Ainda dentro do valor, utilizamos 
as duas barras de pé, || . Essa marcação indica que, se não existir 
um valor para imagem em funcionario.foto , deve-se utilizar 
uma imagem estática no caminho '/assets/imgs/no- 
image.png'. 


Após a finalização da implementação, essa será a nova 
aparência da tabela. 


Foto Nome Email Departamento Função Ações 


Cael Machado kheronn@seed.pr.gov.br CONTABILIDADE Controlador [2] é 
Y 


Kheronn Machado kheronn@gmail.com TI Programador (z) (=) 


Khaike Machado kheronn.machado@escola.pr.gov.br RH Coordenador [2] (=) 


Figura 8.3: Funcionários com imagens 
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Para completar a implementação do upload no formulário, 
vamos incluir o seguinte código abaixo do campo de função: 
<div class="p-field p-col-12 p-md-6"> 
<label for="foto">Foto:</label> 
<input type="file" ginputFile class="form-control" (chang 
)="upload(S$event)" /> 
<progress style="width: 100%;" max="100" [value]="(upload 


Percent | async)"></progress> 
</div> 


Incluímos o campo do tipo com type="file" para escolha 
de arquivos no computador. Definimos uma variável de template 


em HinputFile , conforme mencionado na classe do 
componente. 


No método  (change)="upload($event)" , chamamos a 
função implementada anteriormente para o upload. 


Finalizamos a implementação com a declaração de uma barra 
de progresso com o componente <progress , vinculando o valor 
em [value] ao objeto que codificamos na classe 

uploadPercent , sem esquecer de usar o pipe | async para 
operações assíncronas. 


O formulário terá o seguinte visual: 
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Dados do funcionário 


| Nome+: Khaike Machado 
Email*: khaike@email.com| 
Departamento*: RH x » 
Função: Coordenador 





Foto: = o 
si | Escolher arquivo |Nenhum a...ecionado 


O Atualizar 


Figura 8.4: Formulário funcionário com o campo para o upload 





Assim que incluímos mais registros, acessando o console do 
Firebase e, clicando no menu Storage, temos a pasta de 


Funcionários: 


CD gs://requisicoes-app.appspot.com 
o Nome Tamanho 


yr As regras padrão de segurança exigem que os usuários se autentiquem 


O CJ funcionarios/ — 


Figura 8.5: Pasta Funcionários 


Clicando na pasta, temos acesso aos arquivos armazenados 
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com segurança: 


GƏ gs://requisicoes-app.appspot.com > funcionarios £ Fazer upload do arquivo 


O Nome Tamanho Tipo Última modificação 
Ár As regras padrão de segurança exigem que os usuários se autentiquem Saiba mais Dispensar 
o PA 1558095474055 10,69 KB image/jpeg 17 de mai de 2019 
o PR 1558096760014 10,69 KB image/jpeg 17 de mai de 2019 
o PA 1558098560842 45,05 KB image/jpeg 17 de mai de 2019 
o PA 1558098674185 10,69 KB image/jpeg 17 de mai de 2019 


Figura 8.6: Arquivos no Storage 


Assim concluímos o capítulo com a utilização de mais um 
serviço da plataforma Firebase. 


A partir dessa implementação é possível ampliar o uso dos 
recursos de forma fácil e personalizar conforme a necessidade. 


No próximo capítulo vamos explorar o desenvolvimento de 
funções executadas no lado do servidor. 
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CaríruLo 9 


FIREBASE CLOUD 
FUNCTIONS - CRIAÇÃO 
DE USUÁRIO E ENVIO DE 
EMAILS 


Uma demanda comum no desenvolvimento de aplicações está 
relacionada à execução de operações no servidor. Isso porque há 
cenários em que a execução do lado do cliente exige muito recurso 
de memória ou uso da banda. 


Entre os casos podemos citar operações de manutenção na base 
de dados, disparo de emails com base em eventos, notificações e 
outros. 


Assim, ter a disposição um ambiente do lado do servidor que 
realize essas ações ao invés da aplicação é uma forma adequada no 
desenvolvimento de sistemas escaláveis e que otimizem recursos. 


Com o Cloud Functions para Firebase, conseguimos executar o 
código de back-end automaticamente em resposta a eventos 
acionados pelos recursos do Firebase. A plataforma se encarrega de 
gerenciar e dimensionar automaticamente os recursos 
computacionais. 
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Neste capítulo vamos explorar esse recurso na implementação 
dos requisitos Criar usuário e Notificar usuário. 


Detalhando as operações, no primeiro requisito, vamos invocar 
uma função no servidor que crie um usuário com email e senha 
toda vez que o evento de inserção na coleção de funcionários for 
disparado. 


Na segunda operação, queremos que o funcionário que lançou 
uma requisição seja informado por email toda vez que houver 
movimentação. 


Nas próximas seções vamos configurar nosso projeto e 
codificar as funções necessárias. 


9.1 FIREBASE CLI 


O primeiro passo para utilizar o recurso será a instalação de 
uma interface de linha de comando, o Firebase CLI. 


Através dele conseguimos uma série de ferramentas para 
gerenciar, visualizar e implantar projetos do Firebase. 


No terminal, informe: 
npm install -g firebase-tools 


Uma vez instalado, devemos realizar o login. Ainda no 
terminal digite: 


firebase login 


Utilize as mesmas credenciais utilizadas no capítulo 3. Firebase. 
Dessa forma, conectamos a máquina local ao Firebase, com acesso 
aos nossos projetos. 
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No próximo comando, o terminal solicitará através de etapas, 
algumas configurações para criação do projeto relacionado às 
funções. 


Você pode criar uma pasta específica para ou projeto ou 
utilizar a estrutura da aplicação em Angular. Eu utilizarei a última 
por razões de versionamento de código, assim, com o terminal na 
pasta do projeto, informe: 


firebase init functions 


O comando inicia um diretório functions na raiz do projeto, 
solicitando qual o projeto no Firebase vamos vincular. No caso, 
escolhi requisicoes-app , conforme ilustração a seguir: 


=== Project Setup 


First, let's € this project directory with a Firebase project. 
You can creat iple project aliases by running firebase use --add, 
but for now we'll j t up a default project. 


Select a default Firebase project for this directory: 


[don't setup a default project] 
devdata-web (WebSite) 





[create a new project] 


Figura 9.1: Vinculando o projeto 


A próxima pergunta informa que será criado um projeto 
Node.js com os pacotes pré-configurados e que as funções podem 
ser implantadas, e solicita a linguagem que utilizaremos para 
escrever o código. Vamos usar o JavaScript: 
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=== Functions Setup 


ith a Node. js 
ad with firebase deploy. 


What language would you like to use to write Cloud Functions? (Use arrow keys) 





TypeScript 


Figura 9.2: Selecionando a linguagem 


O último passo questiona se desejamos instalar as 
dependências. Confirmamos com Y . 


Wrote functions/package. json 

Wrote functions/index.js 

Wrote functions/.gitignore 

Do you want to install dependencies with npm now? (Y/n) 





Figura 9.3: Instalando as dependências 


Depois de um momento já temos a pasta functions com os 
arquivos das dependências e o index.js , onde codificaremos as 
funções. 


4 functions 


b 


gitignore 


package-lock.json 


package.json 





Figura 9.4: Conteúdo da pasta functions 


Na raiz do projeto também foram criados dois novos arquivos: 


* firebase.jon Arquivo que lista as configurações do projeto; 
* .firebaserc Armazena os aliases de projeto. 
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Para enviar e-mails vamos precisar de uma instalação 
adicional. Navegue até a pasta do projeto: 


cd functions 
E na sequência, digite: 
npm install nodemailer --save 


Assim, instalamos o Nodemailer, que é um módulo para 
aplicações Node.js que permite o envio de e-mails. 


Dessa forma já temos realizado o setup inicial para utilização 
do Cloud Functions. 


Na próxima seção vamos criar a primeira função que cria um 
usuário para logar na aplicação. 


9.2 FUNÇÃO PARA CRIAR UM USUÁRIO 


Vamos abrir o arquivo functions/index.js e começar a 
codificação. Começamos definindo os imports necessários em: 
const functions = require('firebase-functions'); 
const admin = require('firebase-admin'); 


const nodemailer = require('nodemailer'); 
admin. initializeapp(); 


Inicialmente precisamos importar os módulos do Cloud 
Functions e do SDK Admin usando instruções require do Node. 


Em admin , temos por exemplo acesso aos seguintes recursos: 


e Lere gravar dados no Realtime DataBase; 
e Gerar e verificar tokens de autenticação; 
e Acesso ao Cloud Firetore. 
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Em nodemailer carregamos o módulo para envio de emails 
e, na linha admin. initializeapp() , inicializamos uma instância 
de admin. 


O próximo passo é definir as credenciais de uma conta que 
utilizaremos para envio de emails. 
let mailTransport = nodemailer.createTransport(f 
service: 'gmail', 
auth: { 


user: sem-email@gmail.com', 
pass: sua-senha' 


} 
}); 

Definimos uma variável mailTransport para criar um 
transporte, passando o tipo do serviço e as credenciais para 
autenticação. Informe seu e-mail e senha. 


Os dois passos a seguir são de extrema importância para 
habilitar o Gmail no envio de emails através de aplicações de 
terceiros: 


1. Habilitar no endereço https://bit.ly/124TgWN o acesso a 
apps menos seguras. 

2. Permitir acesso à sua conta Google em 
https://bit.ly/2HETuL6. 


Sobre habilitar "apps menos seguras", o Google define assim 
para enfatizar os riscos de integrar com APIs de terceiros. 


Sem esses procedimentos NÃO É POSSÍVEL ENVIAR 
EMAILS COM GMAIL pois você terá problemas relacionados à 
permissão. 


Seguindo o código, vamos escrever a função que “escuta” um 
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evento no banco de dados e capturar os dados: 


exports.createUser = functions.firestore 
. document ('/funcionarios/(documentId)') 
.onCreate((snap, context) => { 


const funcionario = snap.data(); 
const email = funcionario.email; 
const nome = funcionario.nome; 


Definimos uma função nomeando como createUser 
Através do objeto firestore temos acesso aos eventos do banco. 
Na sequência, acessamos a coleção /funcionarios utilizando 
um coringa (documentId) . Dessa forma, conseguimos ativar o 
evento onCreate para qualquer documento. 


Continuando a explicação do código, definimos três variáveis 
funcionario , email e nome que receberão no callback do 
evento o documento criado através do objeto snap . 


Para entender o método, há possibilidade de gerenciar 4 tipos 
de eventos: 


Tipo Acionador 
onCreate Quando um documento é gravado pela primeira vez 
onupdate Quando um documento já existe e tem algum valor alterado 
onDelete Quando um documento é excluído 
onwrite Acionado quando qualquer outros três eventos forem adicionados 


Na sequência recuperamos o valor da inserção em 
snap.data() eo atribuímos à variável funcionario. 


Através dessa propriedade conseguimos recuperar as 
informações do funcionário, como o e-mail, por exemplo. 
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Na sequência temos o trecho que invocamos para criar o 
usuário do Firebase: 


return admin. auth().createUser(f 

uid: `${email}`, 
email: `${email}`, 
emailvVerified: false, 
password: "123456", 
displayName: `${nome}`, 
disabled: false 

)).then((userRecord) => { 
console. log('Usuário registrado com sucesso!) 
return userRecord; 


3) 


.catch(function (error) { 
console. log("Não foi possível criar o usuário:", error); 


5); 
3) 
Passamos as informações do funcionário para o método 
admin.auth().createUser , como um identificador único uid, 


o email,asenha password. 


Estamos definindo a senha para todos os usuários criados 
como 123456 . Aqui você pode definir uma regra de negócio 
própria. 


Por fim, finalizamos com a exibição no console.log para a 
Promise concluída then ou exibindo o erro com cacth. 


Podemos testar a função, realizando a implantação no Firebase. 
No terminal, informe: 


firebase deploy 


Se tudo estiver correto, no terminal aparecerá a mensagem de 
que foi implantado com sucesso. Acesse o 
https://console.firebase.google.com e clique no menu Functions . 
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No painel central aparece o nome da função implantada: 


Função Acionador 


se document.create 


createUser e funcionarios/(documentid) 





Figura 9.5: Função createUser() 


Para testar a função devemos subir a aplicação ( ng serve - 
o ) e realizar um novo registro de funcionário. 


Ao retornar no console do Firebase, menu Functions , clique 
na guia Registros. 


RM createUser Function execution started 

[ua] createUser » Billing account not configured. External network is not accessible 
0 createUser Usuário registrado com sucesso 

[me createUser Function execution took 1557 ms, finished with status: 'ok' 


Figura 9.6: Função createUser() 


Temos o resultado da execução da função com a exibição das 
mensagens. A mensagem que se inicia com Billing account 
not configured significa que estamos utilizando um plano do 
Firebase, o Spark, com restrições e limites de cotas. Para uso 
comercial e dependendo da quantidade de acessos, o 
desenvolvedor deve escolher outro plano. 


Portanto, o funcionário já tem acesso ao sistema de requisições 
com o e-mail informado no seu cadastro. 
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9.3 FUNÇÃO PARA NOTIFICAR UM USUÁRIO 
- ENVIAR E-MAILS 


Ainda na codificação do arquivo index. js, vamos criar uma 
função para disparar um e-mail toda vez que uma requisição 
receber uma atualização. 


Na seção anterior, já tinhamos definido um objeto que utiliza a 
biblioteca Nodemailer para enviar e-mails. Para mais detalhes da 
biblioteca, acesse: https://nodemailer.com/about. 


Vamos analisar o código da função notifyUser que começa 
assim: 
exports.notifyUser = functions.firestore 


. document ('/requisicoes/(documentId)') 
.onUpdate((snap, context) => { 


const requisicao = snap.after.data(); 
const solicitante = requisicao.solicitante; 
const email = solicitante.email; 


Novamente, vamos utilizar um evento do firestore, mas desta 
vez será da coleção requisicoes . O evento em questão será 
ativado quando um documento da requisição sofrer atualização. 
Para recuperar os valores, devemos usar a propriedade 
after. data(). 


Atribuímos os valores a uma variável que será a requisicao . 
Depois disso, recuperamos o solicitante eo email. 


Continuando, temos: 
const movimentacoes = requisicao.movimentacoes; 


if (movimentacoes.length > 0) { 
const movimentacao = movimentacoes[movimentacoes. length - 1] 
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const texto = '<h2> Sua requisição recebeu uma atualização! 
</h2> 


<h3> Descricao: $(movimentacao. descricao) < 
h3> 
<h4> Status: $(movimentacao.status) <br> ` 
const mailOptions = { 
from: '<noreplyQfirebase.com>", 
to: email, 
subject : "Sistema de Requisições | Processamento de Requ 
isições”, 
html : `${texto}` 
>; 
return mailTransport.sendMail(mailOptions).then(() => { 
console. log('Email enviado para:', email); 
return null; 
)).catch((error) => { 
console. log("Não foi possível notificar o usuário:", erro 
r); 
3); 
) 
}) 


Recuperamos o array de movimentacoes e verificamos o 
tamanho em if (movimentacoes.length > 0). 


No caso de existir pelo menos uma movimentação, escrevemos 
a lógica, recuperando a última movimentação do array em 
movimentacoes[movimentacoes.length - 1]. 


Na sequência, vamos desenvolver um texto para o corpo do 
email, utilizando tags HTML para formatação: 
const texto = `<h2> Sua requisição recebeu uma atualização! </h 
2> 
<h3> Descricao: ${movimentacao.descricao} < 


/h3> 
<h4> Status: ${movimentacao.status} <br> ` 


Com a variável movimentacao , temos acesso aos atributos 
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para exibição como a ${movimentacao. descricao) e o 


$(movimentacao. status). 


Definimos um objeto para opções do emailem mailoptions . 
Aqui declaramos o destino em to , o título da mensagem em 
subject eo corpo do email, em html. 


Por fim, invocamos o método para enviar passando o objeto 
com as opções em mailTransport.sendMail(mailoptions). 


E assim finalizamos a escrita do método. Para ver o código na 
integra acesse: https://bit.ly/2HHX dat. 


Para realizar o teste dessa função você deve: 


1. Criar uma requisição com seu usuário com email verdadeiro; 

2. Criar uma movimentação para essa requisição (qualquer 
usuário); 

3. Verificar na caixa de entrada a mensagem. 


Sistema de Requisições | Processamento de Requisições 


datadevers(dgmail.com 
para eu v» 


Sua requisição recebeu uma atualização! 
Descricao: Teste 


Status: Teste 


Figura 9.7: Email de notificação 


Dessa forma, conseguimos realizar a integração da aplicação 
com mais um recurso do Firebase para execução de códigos no 
lado do servidor. 
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No próximo e último capítulo vamos implantar a aplicação 
desenvolvida utilizando mais um serviço do Firebase. 
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CaríruLo 10 


DEPLOY DA APLICAÇÃO E 
CONSIDERAÇÕES FINAIS 


Neste último capítulo, vamos fazer o deploy da aplicação 
utilizando o serviço Firebase Hosting. 


Esse recurso oferece hospedagem rápida e segura, além de 
conseguirmos implantar o projeto com um único comando. 


10.1 FIREBASE HOSTING 


No capítulo anterior, instalamos o firebase-tools, ferramenta 
necessária para implantação no servidor. Assim, o que faremos a 
seguir é criar o projeto para produção. 


No terminal informe o comando: 
ng build --prod 


O parâmetro build gera nossa aplicação utilizando a 
ferramenta Webpack, com opções de configuração padrão 
especificadas no arquivo de configuração do arquivo 
angular .json. 


A opção --prod otimiza a construção e o tamanho final da 
aplicação. 
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Será gerada uma pasta dist no diretório raiz do projeto 
contendo uma pasta com os arquivos do projeto, prontos para a 
implantação. 


4 REQUISICOES-APP 


4 


b requisicoes-app 


functions 


editorconfig 
firebaserc 


gitignore 





Figura 10.1: Pasta com os projeto para produção 


O próximo passo é configurar a hospedagem. No terminal 
informe: 


firebase init hosting 


e na sequência, Y para continuar. O comando iniciará as 
configurações solicitando algumas informações. O terminal exibe a 
mensagem de que já existe um arquivo .firebaserc definido 
para o projeto, conforme imagem a seguir. 
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Before we get started, keep in mind: 


You are initializing in an e j directory 


Are you ready to proceed? 


Project Setup 
First, let's assoc this project directory with a Firebase project. 
You can create multiple project aliases unning firebase use --add, 
but for now we'll just set up a default project. 


.firebaserc already has a default » Skipping 


=== Hosting Setup 





Figura 10.2: Iniciando as configurações de hospedagem 


Isso ocorre porque já fizemos no capítulo anterior o mesmo 
comando firebase init para implantar as funções no servidor. 
Porém, note que dessa vez utilizamos no final do comando a opção 

hosting , para explicitar o tipo de recurso que vamos associar. 


A pergunta seguinte solicita o nome do diretório público que 
vamos enviar para o servidor. Informamos dist/requisicoes- 
app , conforme os passos que fizemos no começo do capítulo ao 
gerar o projeto para produção. 


What do you want to use as your public directory? 





Configure as a single-page app (rewrite all urls to /index.html)? () 


IN) 


Figura 10.3: Configuração de Diretório e SPA 
Confirmamos também com Y para o tipo da aplicação que é 
Single Page App (SPA). 


A última interação pergunta se queremos sobrescrever o 
arquivo index.html . Informamos com N , pois nosso projeto já 
possui o arquivo. 
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What do you want to use as your public directory? 





Configure as a single-page app (rewrite all urls to /index.html)? (y 


Figura 10.4: Finalizando a configuração 


Concluímos a configuração para utilizar o serviço de 
hospedagem do Firebase. 


Agora, podemos implantar o projeto informando o comando 


no terminal: 
firebase deploy only --hosting 


Repare que já utilizamos o comando firebase deploy no 
capítulo anterior para enviar as funções ao servidor. A diferença 
está no acréscimo da opção only --hosting , indicando para 
subir somente os arquivos para hospedagem do projeto. 


A imagem a seguir apresenta o resultado do console, com o 
deploy completo. 


=== Deploying to 'requisicoes-app'... 


ing hosting 


Deploy complete! 


Project Console: 
Hosting URL: 


PS C: Users 





Figura 10.5: Pasta com os projeto para produção 


A informação Hosting URL está o endereço da aplicação, 


https://requisicoes-app.firebaseapp.com , conforme 
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imagem a seguir do navegador: 


€ > CGC & hitps//requisicoes-app.firebaseapp.com/login 





LG Optimus... Y 384 x 640 125% ¥ Mobile v ; 


f — 
f — 


é == Sistema de Requisições 


Email 


testeODteste.com 


Senha 


Senha 


+) LOGAR 





OU 


EM RECUPERAR 





Figura 10.6: Aplicação hospedada no Firebase 


Toda vez que desejarmos implantar uma versão atualizada da 
aplicação será necessário somente construir o projeto e realizar o 
deploy. 


158 10.1 FIREBASE HOSTING 


No painel do Firebase (https://console.firebase.google.com) 
podemos acessar o histórico de implantações da aplicação, reverter 


um lançamento, além de configurar um domínio próprio. 





Domínios de requisicoes-app 


Conectar dominio 


Domínio Status 


requisicoes-app.web.app 
Padrão 


requisicoes-app.firebaseapp.com 
Padrão 


Figura 10.7: Painel do Hosting no Firebase 


E assim, com poucos passos, concluímos efetivamente a 
integração do projeto com mais um serviço da plataforma 
Firebase, hospedando a aplicação em um ambiente seguro e com 
conteúdo por SSL, além de poder utilizar os subdomínios 
web.app e firebaseapp.com. 


10.2 IVY - O NOVO COMPILADOR DO 
ANGULAR 


A versão 8 do angular introduziu um novo compilador do 
framework, o Ivy. 
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Ivy 


Trata-se de uma reescrita completa do compilador e tempo de 


execução sem alterar a forma como escrevemos aplicações em 
Angular. 





Entre os objetivos dessa mudança, podemos listar: 


e Melhor tempo de compilação (com uma compilação mais 
incremental); 

e Redução do tamanho de compilação; 

e Carregamento lento de componente em vez de módulos; 

e Sistema novo de detecção de alterações não baseado em 

zone.js (utilizado para detectar quando determinadas 

operações assíncronas ocorrem para acionar um ciclo de 
detecção de alterações. Um exemplo do uso é quando o 
Angular realiza verificação e execução de atualizações da 
interface do usuário.). 


Podemos definir o uso do Ivy na construção de um novo 
projeto. 


No terminal, informe: 
ng new meu-projeto --enable-ivy 


A flag --enable-ivy já configura o projeto, definindo as 
propriedades necessárias para uso do novo compilador. 


Para um projeto existente, as seguintes alterações devem ser 
realizadas: 
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1. Encontre o arquivo tsconfig.app.json na raíz do projeto 
e defina a propriedade enableIvy para true dentro de 
angularCompilerOptions . 

{ 
"compilerOptions": { ss 3, 
"angularcCompilerOptions": { 


"enableIvy": true 


} 
} 


2. No arquivo de configuração angular.json , defina as 
opções de construção padrão para o seu projeto para sempre 
usar a compilação aot . 


AOT 


O compilador Angular Ahead of Time (AOT) converte o 
código Angular HTML e TypeScript em código JavaScript 


eficiente durante a fase de compilação, antes que o navegador 
faça o download e execute esse código, fornecendo uma 
renderização mais rápida. 





"projects": { 
"my-existing-project": { 
"architect": { 
"buird": £ 
"options": -{ 


"aot": true, 
} 
} 
} 
J 
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Está feito! O projeto está configurado para utilizar o novo 
compilador do Angular. 


10.3 CONSIDERAÇÕES FINAIS 
Chegamos ao final do livro, mas não do desenvolvimento. 


Encontrar, filtrar, selecionar e roteirizar a quantidade de 
materiais disponíveis hoje na Web é quase uma tarefa hercúlea. 


O programador iniciante tende a ficar perdido nessa imensidão 
de conteúdos, levando tempo e muitas vezes desânimo na 
construção de um sistema real. 


Dessa forma, o objetivo deste livro foi apresentar as principais 
características do framework Angular integrando com a 
plataforma Firebase, desenvolvendo um sistema de requisições. 


Desenvolvemos requisitos que são comuns a todo sistema 
como Login, Área Restrita, Menu e CRUDs de entidades, 
explorando conceitos chaves da linguagem como Componentes, 
Módulos, Rotas e Serviços. 


Integramos a aplicação a diversos recursos do Firebase como 
autenticação, banco de Dados, armazenamento de arquivos, 
execução de funções nas nuvens e hospedagem. 


Assim, o leitor pode utilizar essa obra como referência ou 
ponto de partida para a construção de uma gama de sistemas, 
adequando aos seus requisitos e necessidades da implementação. 
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Espero ter contribuído para que mais desenvolvedores utilizem 
esse incrível framework na construção de soluções. 


Lembre-se, você não precisa ter talento, mas ser 
apaixonadamente curioso ou curiosa. (Einstein) 


Obrigado! 


10.4 LINKS CONSULTADOS 


Documentação do Angular - https://angular.io/docs 


Documentação do Firebase - https://firebase.google.com/docs? 
hl=pt-BR 


AngularFire - https://github.com/angular/angularfire2 

Cloud Firestore - https://firebase.google.com/docs/firestore 
Cloud Sorage - https://firebase.google.com/docs/storage 
Cloud Functions - https://firebase.google.com/docs/functions 
Hosting - https://firebase.google.com/docs/hosting 

PrimeNG - https://www.primefaces.org/primeng 
Nodemailer - https://nodemailer.com/about 

Medium - https://medium.com/(kheronn.machado 


GitHub - https://github.com/kheronn 
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